Lista desplegable y plegable con jQuery

Supongamos que tenemos una lista de elementos, en el que cada elemento está compuesto por un titular y una descripción. Por ejemplo:

18 Wheels Extreme Trucker
Ya está aquí el último simulación de camiones dentro de la conocida serie 18 Wheels.
Simulación – PC CD-ROM

A Stroke of Fate: Operation Valkyrie
Basada en hechos históricos reales. El último atentado contra Adolf Hitler.
Aventura Gráfica – PC DVD-ROM

A Vampire Story
Una aventura gráfica tradicional creada por Bill Tiller, famoso por aventuras como The Dig, The Curse of Monkey Island e Indiana Jones.
Aventura Gráfica – PC DVD-ROM

Aion
Descubre un espectacular mundo online lleno de historias y leyendas.
On-Line - PC DVD-ROM

Airbus Fleet para FSX
Airbus Fleet te ofrece la oportunidad de pilotar la mayoría de la flota de aviones de Airbus. Add-On de Microsoft Flight Simulator
Add-on – PC CD-ROM

American Civil War
Juego de gran estrategia histórica creado por Philippe Thibaut, autor de Europa Universalis. El juego se desarrolla mediante turnos simultáneos y sitúa a los jugadores al frente de los bandos combatientes de la Guerra Civil Americana (1861- 1865).
Estrategia -PC CD-ROM

Around the World in 80 Flights
Circunnavega el globo, en rumbo este, desde el histórico aeródromo de Farnborough, en el Reino Unido, en un épico viaje de 80 etapas alrededor del mundo en este add-on para Microsoft FSX y FS2004.
Add-on – PC CD-ROM

Battle of Britain 2: Wings of Victory
Battle of Britain 2 “Wings of Victory” es un simulador de vuelo que recrea las famosas batallas aéreas que tuvieron lugar en el sur de Inglaterra en 1.940
Simulación – PC CD-ROM

Supongamos igualmente que sólo queremos que se vean los títulos y que la descripción se vea únicamente cuando hacemos click sobre el título correspondiente. Además, si hay alguna descripción ya abierta queremos que se cierre si hacemos click sobre otro título diferente o sobre el mismo título (un segundo click sobre el mismo).

¿Cómo lo hacemos? Con jQuery es muy sencillo.

Pero primero vamos a ver cómo escribimos el código de la lista. Lo más lógico es hacer una lista de definición o definition list:

<dl>
<dt>18 Wheels Extreme Trucker</dt>
<dd>Ya está aquí el último simulación de camiones dentro de la conocida serie 18 Wheels. Simulación - PC CD-ROM</dd>
 
<dt>A Stroke of Fate: Operation Valkyrie</dt>
<dd>Basada en hechos históricos reales. El último atentado contra Adolf Hitler.
Aventura Gráfica - PC DVD-ROM</dd>
 
<dt>A Vampire Story</dt>
<dd>Una aventura gráfica tradicional creada por Bill Tiller, famoso por aventuras como The Dig, The Curse of Monkey Island e Indiana Jones.
Aventura Gráfica - PC DVD-ROM</dd>
 
<dt>Aion</dt>
<dd>Descubre un espectacular mundo online lleno de historias y leyendas.
On-Line 	- PC DVD-ROM</dd>
 
<dt>Airbus Fleet para FSX</dt>
<dd>Airbus Fleet te ofrece la oportunidad de pilotar la mayoría de la flota de aviones de Airbus. Add-On de Microsoft Flight Simulator
Add-on - PC CD-ROM</dd>
 
<dt>American Civil War</dt>
<dd>Juego de gran estrategia histórica creado por Philippe Thibaut, autor de Europa Universalis. El juego se desarrolla mediante turnos simultáneos y sitúa a los jugadores al frente de los bandos combatientes de la Guerra Civil Americana (1861- 1865).
Estrategia -PC CD-ROM</dd>
 
<dt>Around the World in 80 Flights</dt>
<dd>Circunnavega el globo, en rumbo este, desde el histórico aeródromo de Farnborough, en el Reino Unido, en un épico viaje de 80 etapas alrededor del mundo en este add-on para Microsoft FSX y FS2004.
Add-on - PC CD-ROM</dd>
 
<dt>Battle of Britain 2: Wings of Victory</dt>
<dd>Battle of Britain 2 “Wings of Victory” es un simulador de vuelo que recrea las famosas batallas aéreas que tuvieron lugar en el sur de Inglaterra en 1.940 
Simulación - PC CD-ROM</dd>
 
</dl>

A continuación cargamos jQuery. Podéis ver como hacerlo en este artículo: Curso de jQuery – Introducción.

Y a continuación escribimos el siguiente código dentro del header:

<script type="text/javascript">
    $(document).ready(function(){
      	$("dd").hide();
	$("dt").click(function(event){
             var desplegable = $(this).next();
             $('dd').not(desplegable).slideUp('fast');
              desplegable.slideToggle('fast');
              event.preventDefault();
              })
        });
</script>

Como veis es muy sencillo. Primero ocultamos todos los elementos dd con

1	$("dd").hide();

Luego decimos que al hacer click sobre un elemento dt se ejecute una función:

1	$("dt").click(function(event){

Como vemos a esta función le pasamos el evento como parámetro. El objeto evento da información sobre el evento que se invoca sobre cada elemento en cuestión y nos ofrece métodos que afectan a la progresión del evento, como veremos al final de la función.

A continuación asignamos a una variable que hemos denominado “despleglable” el elemento “dd” que sigue al elemento “dt” concreto sobre el que hemos hecho click:

1	var desplegable = $(this).next();

Como vemos eso lo conseguimos con $(this) que es como decir “este”, de todos los “dt” sólo este, sobre el que hemos hecho click.

A continuación buscamos cualquier “dd” que esté desplegado pero que no sea el recogido en la variable “desplegable”, y lo plegamos:

1
2
3

<script type="text/javascript">
 $('dd').not(desplegable).slideUp('fast');
</script>

Y a continuación desplegamos el “dd” concreto que almacenamos en la variable “desplegable” y lo plegamos si estaba desplegado:

1	desplegable.slideToggle('fast');

Por último, cancelamos el evento si es cancelable para evitar que el efecto se propague:

1	event.preventDefault();

De esta manera se detiene el efecto cuando hacemos click sobre un titulo y acabamos de hacer click sobre otro juntándose a la vez varios efectos de pliegue y despliegue.

Podemos ver la Demo en http://www.emenia.es/demos-blog/lista-desplegable/