Ocultar varias div

[ceaped]

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

Código HTML:

<a id="visibilityHidden" href="#" title="Título 1 ">Enlace 1</a>
<a id="visibilityHidden" href="#" title="Título 2 ">Enlace 2</a>
<a id="visibilityHidden" href="#" title="Título 3 ">Enlace 3</a>
 

Código HTML:

<div id="hide-me">contenido 1</div>
<div id="hide-me">contenido 2</div>
<div id="hide-me">contenido 3</div>
 

Código Javascript:

$('#displayNone').click(function(e) {
  
  // Resetear, por si acaso has estado jugando con la otra propiedad
  $('#hide-me').css('visibility', 'visible');
  
  if( $('#hide-me').is(":visible") ) {
    $('#hide-me').css('display', 'none'); 
  } else {
    $('#hide-me').css('display', 'block');
  }
});
 
$('#visibilityHidden').click(function(e) {
  
  // Resetear, por si acaso has estado jugando con la otra propiedad
  $('#hide-me').css('display', 'block');
  
  if( $('#hide-me').css('visibility') != 'hidden' ) {
    $('#hide-me').css('visibility', 'hidden');
  } else {
    $('#hide-me').css('visibility', 'visible');
  }
});
 

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

[Alexis88]

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:

<section>
    <span class="button">Mostrar/Ocultar panel 1</span>
    <span class="button">Mostrar/Ocultar panel 2</span>
    <span class="button">Mostrar/Ocultar panel 3</span>
</section>
 
<section>
    <div class="panel">Panel 1</div>
    <div class="panel">Panel 2</div>
    <div class="panel">Panel 3</div>
</section>
 

Código Javascript:

$(".button").on("click", function(){
    var posBut = $(".button").index(this), //Número de botón pulsado
        panel = $(".panel").eq(posBut);  //Panel equivalente al botón pulsado
    panel.slideToggle(); //Se muestra u oculta al panel
});
 

DEMO

[ceaped]

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

Muchos éxitos!!!

[Dalam]

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.

[ceaped]

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

[Alexis88]

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:

$(".button").on("click", function(){
    var posBut = $(".button").index(this),
        panel = $(".panel").eq(posBut),
        aux;
    
    if (aux = $(".visible")){ //Si hay un elemento con la clase "visible"
        aux.removeClass("visible"); //Se la quito
        aux.slideToggle(); //Y lo oculto
    }
    
    if (aux[0] != panel[0]){ //Si el elemento equivalente al botón pulsado es diferente al que posee la clase "visible"
        panel.addClass("visible"); //Le asigno dicha clase
        panel.slideToggle(); //Y lo muestro
    }
});
 

Puedes ahorrar líneas usando la concatenación de métodos de jQuery:

Código Javascript:

$(".button").on("click", function(){
    var posBut = $(".button").index(this),
        panel = $(".panel").eq(posBut),
        aux;
    
    if (aux = $(".visible")){
        aux.removeClass("visible").slideToggle();
    }
    
    if (aux[0] != panel[0]){
        panel.addClass("visible").slideToggle();
    }
});
 

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