Lista desplegable y plegable con jQuery

Escrito el 30 enero, 2010 por Juan Díaz-Bustamante

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/

Sigue a Juan en Twitter, en Google+, o suscríbete al RSS Feed de Emenia para estar al día de nuestros artículos.

15 Comentarios a Lista desplegable y plegable con jQuery

Miguel Ruiz dice:
14 febrero, 2010 a las 12:37 pm
Hola, he hecho el tutorial paso a paso y me queda casi igual que el ejemplo, solo que a mi no se me cambia el cursor cuando paso por encima de el texto que se va a desplegar. Puedes verlo aquí: http://socialbit.blogspot.com/p/mi-glosario-es-la-transformacion-bits.html
Habría que añadir alguna funcion al html?, algún onmouseover?.
Gracias y un saludo!
Responder
- Juan Diaz-Bustamante dice:
  14 febrero, 2010 a las 12:55 pm
  Gracias Miguel. No hace falta, lo puedes hacer por CSS poniendo cursor: pointer;
  Responder
Miguel Ruiz dice:
14 febrero, 2010 a las 4:56 pm
Gracias a tí Juan.
He añadido la propiedad que me has dicho desde JQuery y ha funcinado!. La dejo aquí por si alguien la necesitara:
1 2
$("dt").css({ 'cursor':'pointer'});
(Se puede colocar por ejemplo justo despues de la función documet(ready))
Un saludo!
Responder
Bibiana dice:
7 diciembre, 2010 a las 11:09 pm
He hecho todo como se indica y he obtenido un menú similar, pero las definiciones de lista dd me quedan con la sangría correspondiente, no como en el ejemplo.
Alguien sabe como solucionarlo?
Saludos!
Responder
martin dice:
29 abril, 2011 a las 12:02 am
genial,
acabo de ponerlo en práctica
saludos
Responder

martin dice:

20 mayo, 2011 a las 10:48 pm

Juan:

implementé con éxito el tutorial en un wordpress remoto (alojado en un servidor pago), pero esta vez quise implementarlo en wp en localhost y no funcionó,

tienes alguna idea de como cargar jquery en localhost?

aquí como cargue wordpress (me funciona en remoto pero no en localhost):

function mi_inicio() {
	if (!is_admin()) {
		wp_deregister_script('jquery');
		wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2', true);
		wp_enqueue_script('jquery');
 
		// cargar el fichero js de mi theme: js/theme.js
		wp_enqueue_script('dimensions', get_bloginfo('template_url') . '/js/jquery.dimensions.js', array('jquery'), '1.0', true);
		wp_enqueue_script('flotante', get_bloginfo('template_url') . '/js/flotante.js', array('jquery', 'dimensions'), '1.0', true);
		wp_enqueue_script('desplegable', get_bloginfo('template_url') . '/js/desplegable.js', array('jquery'), '1.0', true);
	}
}
add_action('init', 'mi_inicio');

Responder

Juan Diaz-Bustamante dice:

20 mayo, 2011 a las 11:40 pm

Hola Martin,

A mi me funciona en localhost sin problemas

if( !is_admin()){
   wp_deregister_script('jquery');
   wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"), false, '1.4.4');
   wp_enqueue_script('jquery');
}

Responder

martin dice:

20 mayo, 2011 a las 11:49 pm

tampoco anduvo …

copio y pego:

function mi_inicio() {
	if( !is_admin()){
   wp_deregister_script('jquery');
   wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"), false, '1.4.4');
   wp_enqueue_script('jquery');
 
 
		// cargar el fichero js de mi theme: js/theme.js
		wp_enqueue_script('dimensions', get_bloginfo('template_url') . '/js/jquery.dimensions.js', array('jquery'), '1.0', true);
		wp_enqueue_script('flotante', get_bloginfo('template_url') . '/js/flotante.js', array('jquery', 'dimensions'), '1.0', true);
		wp_enqueue_script('desplegable', get_bloginfo('template_url') . '/js/desplegable.js', array('jquery'), '1.0', true);
	}
}
add_action('init', 'mi_inicio');

Responder

Juan Diaz-Bustamante dice:
20 mayo, 2011 a las 11:54 pm
Es raro, igual tiene que ver con tu tema o el hook? Prueba a poner lo que puse yo tal cual en functions.php, sin meterlo dentro de ninguna función.
Responder

martin dice:
20 mayo, 2011 a las 11:21 pm
sobre el comentario mío anterior, aclaro que uso localhost pero conectado a internet , y es dentro de un child theme
saludos
Responder
martin dice:
20 mayo, 2011 a las 11:58 pm
Juan:
en realidad no se determinar si lo que NO se esta cargando es Jquery , o el script para el efecto desplegable (desplegable.js) en mi hook
como determino si se esta cargando jquery? se puede determinar con el firebug?
saludos
Responder
- Juan Diaz-Bustamante dice:
  21 mayo, 2011 a las 12:05 am
  Com Web Developer, en Información/Ver código Javascript
  Con Firebug lo más sencillo es que viendo el código HTML haces click sobre el enlace de jQuery y tienes que ver el contenido del archivo
  Responder
martin dice:
21 mayo, 2011 a las 1:03 am
solucionado!
el problema estaba en que no se cargaban los scripts, me equivoqué al pensar que el problema estaba con Jquery,
lo solucioné dentro de mi hook, en la parte donde llamo a los scripts , cambie
1
'get_bloginfo('template_url')'
por
1
' get_stylesheet_directory_uri() '
, dado que estoy usando un child theme de Twentyten
gracias por la ayuda Juan,
un abrazo desde argentina
Responder
- Juan Diaz-Bustamante dice:
  21 mayo, 2011 a las 7:28 am
  Me alegro! Gracias Martin.
  Responder
lei wong dice:
1 enero, 2012 a las 7:14 pm
buenas, muchas gracias por el codigo, ando con un problema….. hice todo lo que dice arriba, pero no se despliega, oculta el contenido dd pero el texto del titulo “dt” esta como texto comun, sin evento de click, la verdad es que no se que le pasa que no anda.
jquery 1.7
Responder

Deja un comentario Cancelar respuesta

Suscribirse a las entradas
del Blog de Emenia (RSS)
Suscribirse a nuestro boletín
mensual por Email
Archivo del Blog
Etiquetas
Comercio electrónico CSS CSS3 Diseño Web Facebook Formulario Web htaccess jQuery marketing Navegación Navegadores Prestashop Redes Sociales SEO Tipografía Twitter Wordpress
Entradas + populares
- Crear una tienda online con Prestashop - Cómo instalar Prestashop (116 comentarios)
- Crea una aplicación con autentificación en tu página de Facebook utilizando el nuevo PHP SDK v3 y OAuth 2.0 (89 comentarios)
- Creando un menú vertical desplegable con jQuery (83 comentarios)
- Elegir una fecha en un formulario con un calendario y jQuery (82 comentarios)
- Cómo crear URLS amigables con .htaccess (68 comentarios)
Últimos artículos

Lista desplegable y plegable con jQuery

Artículos relacionados

15 Comentarios a Lista desplegable y plegable con jQuery

Deja un comentario Cancelar respuesta

Entradas + populares

Últimos artículos

Blog de Emenia

Noticias de Emenia

Lista desplegable y plegable con jQuery

Artículos relacionados

15 Comentarios a Lista desplegable y plegable con jQuery

Deja un comentario Cancelar respuesta

Etiquetas

Entradas + populares

Últimos artículos

Blog de Emenia

Noticias de Emenia