SoloCodigo

Programación Web y Scripting => JavaScript => Mensaje iniciado por: Ale992 en Sábado 13 de Noviembre de 2010, 18:42

Título: Mostrar y ocultar div
Publicado por: Ale992 en Sábado 13 de Noviembre de 2010, 18:42
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 ;).
Título: Re: Mostrar y ocultar div
Publicado por: fonsi3 en Domingo 14 de Noviembre de 2010, 03:26
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.  
Título: Re: Mostrar y ocultar div
Publicado por: LeGatoRojo en Martes 16 de Noviembre de 2010, 17:56
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.