Tengo un bloque de imágenes repetidas, cada una con un título debajo. Estoy usando slideToggle para mostrar y ocultar el título de cada imagen cuando se hace clic en la imagen.

 $('.imageholder').click(function() {
 $(this).next().slideToggle("fast");

 });

Un violín de trabajo que muestra mi método es aquí.

Esto funciona como debería pero quiero evitar que varios subtítulos sean visibles simultáneamente. Cuando un usuario hace clic en una imagen, se deben cerrar los subtítulos abiertos. En mi ejemplo, verá que es posible abrir todos los subtítulos. Esto es lo que quiero evitar.

Agradecería un empujón en la dirección correcta. Gracias.

0
user3532793 14 ene. 2017 a las 00:05

3 respuestas

La mejor respuesta

¿Solo hacer algo como esto?

$('.imageholder').click(function() {
     $('.description').slideUp();
     $(this).next().slideToggle("fast");
});
0
Nicholas 13 ene. 2017 a las 21:12

slideUp() todas las descripciones que no son la actual, luego slideToggle() la actual.

$('.imageholder').click(function() {
  var $desc = $(this).next();
  $('.description').not($desc).slideUp('fast');
  $(this).next().slideToggle("fast");
});
0
Michael Coker 13 ene. 2017 a las 21:09

Deberías intentar ocultar los otros elementos visibles:

$('.imageholder').click(function() {
  $('.description:visible').not($(this).next()).slideToggle("fast");
  $(this).next().slideToggle("fast");
});
0
Niebieski 13 ene. 2017 a las 21:08