Cambiar imágenes según la cabecera pulsada en un acordeón de jQuery

Se quería que al pulsar la cabecera de una lista que funciona como acordeón se cargase una imagen concreta. Cuatro cabeceras, cuatro imágenes. Por defecto se cargaría la primera, de la misma manera que la primera sección del acordeón estaría abierta. Conviene seguir una nomenclatura que permita extender las cabeceras y las imágenes en el futuro sin tener que modificar o modificar mínimamente el código javascript.

Las etiquetas de las imágenes están estructuradas de la siguiente manera:

<!–Imagenes en grande que se muestran cuando pulsas una opcion del menu lateral –>
<div id=”img01″><img src=”img/img01.jpg” alt=”” /></div>
<div id=”img02hidden”><img src=”img/img02.jpg” alt=”” /></div>
<div id=”img03hidden”><img src=”img/img03.jpg” alt=”” /></div>
<div id=”img04hidden”><img src=”img/img04.jpg” alt=”” /></div>

Nótese que no sigue un índice que comience en cero, así que a la hora de seleccionar los divs por el id, habrá que generar un texto que sea (index + 1). Por cada imagen encontrada, la que no coincida con el índice de la cabecera elegida tendrá un id terminado en “hidden”, ya que el estilo oculta esa imagen. En caso contrario, la imagen tendrá un id de “img0X”.


if (jQuery){

var indice_correspondiente = 0;

$(function(){

var enlacesAcordeon = $(‘#list1a a.accordion-label’);

//Dado que la nomenclatura es estable, se puede usar un contador para
// añadir la carga de imágenes específicas por cada cabecera que se pulse.

$(enlacesAcordeon).each(function(index){

$(this).bind(‘click’,function(){

//Cuando se haga click en esta cabecera, se mostrará la imagen
// correspondiente a esta cabecera  (según el índice)
// y se ocultarán las demás.

var enlacesAcordeonAModificar = $(‘#list1a a.accordion-label’);

indice_correspondiente = index;

$(enlacesAcordeonAModificar).each(function(index,correspondiente){

if (index != indice_correspondiente){

//Debo ocultar esta foto.

var imagenCorrespondiente = $(‘#img0’ + (index + 1) );
$(imagenCorrespondiente).attr(‘id’,’img0′ + (index + 1) + ‘hidden’);

}else{

//Debo mostrar esta foto.

var imagenCorrespondiente = $(‘#img0’ + (index + 1) + ‘hidden’);
$(imagenCorrespondiente).attr(‘id’,’img0′ + (index + 1) );

}

}); //Fin de la función each para modificar los acordeones.

});

});

});

}

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: