• Sábado 20 de Abril de 2024, 11:36

Autor Tema:  Mostrar y ocultar div  (Leído 3338 veces)

Ale992

  • Nuevo Miembro
  • *
  • Mensajes: 7
    • Ver Perfil
Mostrar y ocultar div
« en: Sábado 13 de Noviembre de 2010, 18:42 »
0
Bueno me gustaria saber como Mostrar y ocultar una div, es decir algo como un spoiler, al apretar un boton se muestre y que luego con el mismo boton se oculte. Y que ademas se cambie el nombre por ej. que al principio diga MOSTRAR y luego OCULTAR .

Solo eso.

Saludos ;).

fonsi3

  • Miembro activo
  • **
  • Mensajes: 95
    • Ver Perfil
Re: Mostrar y ocultar div
« Respuesta #1 en: Domingo 14 de Noviembre de 2010, 03:26 »
0
Aqui tienes un ejemplo bastante vago:

Código: Text
  1.     var toggleSpoiler = function( e ) {
  2.        
  3.         if( !this.statusElem ) {
  4.             this.statusElem = this.getElementsByClassName( 'toggle-status' )[0];
  5.         }
  6.        
  7.         if( !this.targetElem ) {
  8.             this.targetElem = this.getElementsByClassName( 'toggle-target' )[0];
  9.         }
  10.        
  11.         this.statusElem.typeMsg = ( this.statusElem.typeMsg ) ? false : true;
  12.         this.statusElem.innerHTML = ( !this.statusElem.typeMsg ) ? 'Ocultar contenido' : 'Mostrar contenido';
  13.        
  14.         this.targetElem.style.display = ( this.targetElem.style.display === 'none' ) ? 'block' : 'none';
  15.        
  16.     };
  17.  
  18.     var spoilers = document.getElementsByClassName( 'toggle-spoiler' );
  19.     for( var i = 0, l = spoilers.length; i < l; i++ ) {
  20.         spoilers[i].onclick = toggleSpoiler;
  21.     }
  22.  

Para que el script funcione debe haber un DIV parent con la clase "toggle-spoiler" y con dos childs, uno va a ser el que contiene el menaje "Ocultar/Mostar contenido" segun corresponda, que debe tener la clase "toggle-status" y el otro child con la clase "toggle-target" que es el que contiene el texto a togglear.

Código: Text
  1.         <div class="toggle-spoiler">
  2.             <p class="toggle-status">Ocultar contenido</p>
  3.             <p class="toggle-target">
  4.             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et neque velit. Etiam commodo luctus nisi sed volutpat. Nullam nec eleifend enim. Donec arcu felis, convallis vel molestie non, fermentum sit amet leo. Donec mauris dolor, sollicitudin in faucibus hendrerit, placerat at felis. Sed dolor lacus, porta sed congue eget, porttitor vel ipsum. Curabitur suscipit accumsan nisi in bibendum. Aliquam felis odio, faucibus et ultrices eu, pellentesque non libero. Integer eget mi lacinia erat imperdiet pellentesque sit amet id lorem. Cras non metus eu lorem porttitor sagittis. Proin nec odio eros, vitae elementum ligula. Donec aliquet rhoncus sollicitudin. Integer aliquet elit vitae odio consequat fermentum vulputate dui sodales. Curabitur sit amet urna neque. Mauris molestie ipsum id libero rhoncus quis ultricies eros accumsan. Nulla venenatis odio eu quam consectetur sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  5.             </p>
  6.         </div>
  7.  
Cha che chi cho chu buenichimo!
http://mensoscripts.com

Links de interes: HTML | CCS2~CSS* | PHP
Indispensables tools]Firebug[/url] | Web Developer | FireFTP | Live Headers

LeGatoRojo

  • Miembro HIPER activo
  • ****
  • Mensajes: 552
  • Nacionalidad: mx
    • Ver Perfil
    • LeGatoRojo
Re: Mostrar y ocultar div
« Respuesta #2 en: Martes 16 de Noviembre de 2010, 17:56 »
0
Sólo es necesario que al div logres cambiarle la propiedad style.display por none o block

Código: Text
  1.  
  2.  
  3. //ocultar
  4. div.style.display === 'none';
  5.  
  6. //Mostrar
  7. div.style.display === 'block';
  8.  
  9.  
Un día desperte y en lugar de dientes tenía colmillos, en lugar de manos, tenía garras; pero lo más impactante fue el color escarlata de mi pelaje.