Foros del Web » Programando para Internet » Jquery »

Ocultar varias div

Estas en el tema de Ocultar varias div en el foro de Jquery en Foros del Web. Buenas tardes Tengo varios enlaces para que oculte cada div así: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < a id = "visibilityHidden" href = "#" ...
  #1 (permalink)  
Antiguo 25/11/2016, 12:28
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.173
Antigüedad: 17 años, 2 meses
Puntos: 9
Pregunta Ocultar varias div

Buenas tardes
Tengo varios enlaces para que oculte cada div así:

Código HTML:
Ver original
  1. <a id="visibilityHidden" href="#" title="Título 1 ">Enlace 1</a>
  2. <a id="visibilityHidden" href="#" title="Título 2 ">Enlace 2</a>
  3. <a id="visibilityHidden" href="#" title="Título 3 ">Enlace 3</a>

Código HTML:
Ver original
  1. <div id="hide-me">contenido 1</div>
  2. <div id="hide-me">contenido 2</div>
  3. <div id="hide-me">contenido 3</div>

Código Javascript:
Ver original
  1. $('#displayNone').click(function(e) {
  2.  
  3.   // Resetear, por si acaso has estado jugando con la otra propiedad
  4.   $('#hide-me').css('visibility', 'visible');
  5.  
  6.   if( $('#hide-me').is(":visible") ) {
  7.     $('#hide-me').css('display', 'none');
  8.   } else {
  9.     $('#hide-me').css('display', 'block');
  10.   }
  11. });
  12.  
  13. $('#visibilityHidden').click(function(e) {
  14.  
  15.   // Resetear, por si acaso has estado jugando con la otra propiedad
  16.   $('#hide-me').css('display', 'block');
  17.  
  18.   if( $('#hide-me').css('visibility') != 'hidden' ) {
  19.     $('#hide-me').css('visibility', 'hidden');
  20.   } else {
  21.     $('#hide-me').css('visibility', 'visible');
  22.   }
  23. });

Pero sólo me funciona para la primera div.
¿Cómo hago para que me funcione para cada dic?

Gracias por su ayuda

Nota: de acá tome el ejercicio: CODEPEN
__________________
Diseñador Gráfico publicitario
  #2 (permalink)  
Antiguo 26/11/2016, 15:48
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.509
Antigüedad: 9 años, 5 meses
Puntos: 957
Respuesta: Ocultar varias div

El problema está en que utilizas el mismo id para más de un elemento cuando dicho dato debe ser único en todo el documento.

Como pueden ser tres, cuatro o N elementos para mostrar y ocultar, lo que te conviene hacer es abstraer dicha funcionalidad de tal forma que todos los elementos puedan funcionar de igual manera sin la necesidad de escribir las mismas instrucciones por cada elemento.

Por ejemplo:
Código HTML:
Ver original
  1.     <span class="button">Mostrar/Ocultar panel 1</span>
  2.     <span class="button">Mostrar/Ocultar panel 2</span>
  3.     <span class="button">Mostrar/Ocultar panel 3</span>
  4.  
  5.     <div class="panel">Panel 1</div>
  6.     <div class="panel">Panel 2</div>
  7.     <div class="panel">Panel 3</div>
Código Javascript:
Ver original
  1. $(".button").on("click", function(){
  2.     var posBut = $(".button").index(this), //Número de botón pulsado
  3.         panel = $(".panel").eq(posBut);  //Panel equivalente al botón pulsado
  4.     panel.slideToggle(); //Se muestra u oculta al panel
  5. });

DEMO

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Última edición por Alexis88; 26/11/2016 a las 20:44 Razón: Palabra mal escrita
  #3 (permalink)  
Antiguo 30/11/2016, 06:33
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.173
Antigüedad: 17 años, 2 meses
Puntos: 9
Respuesta: Ocultar varias div

Hola Alexis88
Gracias por tu ayuda, me fue muy útil.

Muchos éxitos!!!
__________________
Diseñador Gráfico publicitario
  #4 (permalink)  
Antiguo 01/12/2016, 05:56
Avatar de Dalam  
Fecha de Ingreso: septiembre-2010
Mensajes: 409
Antigüedad: 10 años, 6 meses
Puntos: 56
Respuesta: Ocultar varias div

la propiedad id deberia ser unica, como tal jquery en el momento que encuentra el primero deja de buscar, para usar mas de una etiqueta con la misma propiedad se suele usar class.
__________________
http://www.roglastudios.es
  #5 (permalink)  
Antiguo 01/12/2016, 07:30
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.173
Antigüedad: 17 años, 2 meses
Puntos: 9
Respuesta: Ocultar varias div

Hola Alexis88
¿Cómo hago para que cuando abra una se cierre la otra?

Yo le puse a .panel "display: none", para que no estén visibles a inicio.

Gracias por tu ayuda
__________________
Diseñador Gráfico publicitario
  #6 (permalink)  
Antiguo 01/12/2016, 11:02
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.509
Antigüedad: 9 años, 5 meses
Puntos: 957
Respuesta: Ocultar varias div

Puedes asignar una clase al elemento que se haga visible en el momento en el que pulses un botón; previamente, buscas si hay algún elemento con dicha clase y, además de ocultarlo, le quitas la clase en cuestión.

Utilizando el ejemplo anterior y suponiendo que todos los paneles están ocultos desde un inicio:
Código Javascript:
Ver original
  1. $(".button").on("click", function(){
  2.     var posBut = $(".button").index(this),
  3.         panel = $(".panel").eq(posBut),
  4.         aux;
  5.    
  6.     if (aux = $(".visible")){ //Si hay un elemento con la clase "visible"
  7.         aux.removeClass("visible"); //Se la quito
  8.         aux.slideToggle(); //Y lo oculto
  9.     }
  10.    
  11.     if (aux[0] != panel[0]){ //Si el elemento equivalente al botón pulsado es diferente al que posee la clase "visible"
  12.         panel.addClass("visible"); //Le asigno dicha clase
  13.         panel.slideToggle(); //Y lo muestro
  14.     }
  15. });

Puedes ahorrar líneas usando la concatenación de métodos de jQuery:
Código Javascript:
Ver original
  1. $(".button").on("click", function(){
  2.     var posBut = $(".button").index(this),
  3.         panel = $(".panel").eq(posBut),
  4.         aux;
  5.    
  6.     if (aux = $(".visible")){
  7.         aux.removeClass("visible").slideToggle();
  8.     }
  9.    
  10.     if (aux[0] != panel[0]){
  11.         panel.addClass("visible").slideToggle();
  12.     }
  13. });

En la última condición, tomo a los elementos situados en la posición cero de cada selección puesto que jQuery asigna a los elementos en cuestión en dicha posición; mientras que en las otras se encuentran elementos como el contexto, selector, entre otros, impidiendo que se haga una comparación a nivel de elementos del DOM (no nos interesa el contexto ni los selectores utilizados).

DEMO

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Última edición por Alexis88; 01/12/2016 a las 11:14 Razón: Demo

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:42.