Como hacer un Acorden (accordion) con jQuery y CSS

Tutoriales / JavaScript December 26, 2012 / Josue Ochoa 11 Comments

Tutorial de: jQuery Dificultad: Intermedio Tiempo: 30 Minutos

En este tutorial haremos un acorden vertical usando jQuery con un cdigo bastante minimalista y facil de entender, usaremos CSS para darle decoracin y mejorar la experiencia de usuario.

Resultado Final Estructura HTML

Usaremos con una lista de definicin o definition list (dl) para manejar la estructura de los contenidos, una vez comprendas el funcionamiento del cdigo podrs adaptarlo a cualquier otra estructura:
<dl> <dt>Titulo 1</dt> <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur maxime cupiditate nesciunt molestias itaque vel reiciendis officiis explicabo cum impedit dolorem quod minus beatae architecto necessitatibus sed exercitationem aliquam omnis!</dd>

1 2 <dt>Titulo 2</dt> 3 <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates mollitia 4 quos! Dolor cum vitae aperiam deserunt hic quas quidem qui excepturi minima repudiandae 5 pariatur id sit dignissimos laborum provident velit!</dd> 6 <dt>Titulo 3</dt> 7 <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio voluptatum 8 expedita sunt voluptatibus ratione assumenda quo animi numquam blanditiis asperiores 9 illo laudantium et quae itaque reiciendis nam ducimus officiis officia?</dd> 10 11 <dt>Titulo 4</dt> 12 <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto obcaecati numquam 13nemo quasi omnis accusamus illo distinctio doloribus architecto culpa maiores blanditiis laborum accusantium assumenda vero necessitatibus optio? Ipsa 14perferendis.</dd> 15 16 <dt>Titulo 5</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto obcaecati numquam nemo quasi omnis accusamus illo distinctio doloribus architecto culpa maiores blanditiis laborum accusantium assumenda vero necessitatibus optio? Ipsa perferendis.</dd> </dl>

jQuery

Luego procedemos a incluir a jQuery y ademas creamos un script en el cual ira nuestro cdigo, si deseas puedes manejarlo en un JS aparte, pero para el ejemplo lo haremos todo junto: 17<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 18<script type="text/javascript"> 19 20</script> Lo primero que haremos sera ocultar todos los dd, pero no los dd que esten posteriores a un dt con clase .activo, esto nos va a permitir dejar un item abierto por defecto, luego procedemos a detectar cuando dt sea presionado:

21$('dl dd').not('dt.activo + dd').hide(); 22$('dl dt').click(function(){ 23 24}); Dentro del evento de click le pondremos una condicin: 22 23$('dl dt').click(function(){ if ($(this).hasClass('activo')) { 24 $(this).removeClass('activo'); 25 $(this).next().slideUp(); 26 } else { $('dl dt').removeClass('activo'); 27 $(this).addClass('activo'); 28 $('dl dd').slideUp(); 29 $(this).next().slideDown(); 30 } 31}); 32 (Linea 23) Si es que este dt que acabamos de cliquear tiene la clase .activo (osea si esta abierto) le quitamos la clase .activo (linea 24) y hacemos que el elemento que le sigue, que vendra a ser el dd adyacente (que esta mostrandose), se oculte (linea 25). En caso contrario (que muy probablemente vendra a ser el estado por defecto) al hacerle clic, lo primero que har es quitarle .activo a todos los dems dt (linea 27), pero le asignamos .activo al que acabamos de cliquear (linea 28), luego ocultamos todos los dd (linea 29) y por ultimo mostramos solo el dd que le sigue a este dt (linea 30), de esta forma solo se muestra uno a la vez.

CSS
Hasta all lo tendramos completamente funcional, sin embargo la experiencia no es tan agradable, para mejorar esto usaremos algo de CSS: 1*{ font-family: sans-serif; margin: 0;} margin: 60px auto; width: 600px; } 2dl{ dt, dd{ padding: 20px; } 3dt{ background: #333333; color: white; border-bottom: 1px solid #141414; border-top: 1px 4solid #4E4E4E; cursor: pointer; }

5dd{ background: #F5F5F5; line-height: 1.6em; } 6dt.activo, dt:hover{ background: #424242; }

Va quedadon mejor, sin embargo podemos hacer mas aun, le vamos a aadir unas flechitas con la ayuda de la pseudo-clase :after. 1dt:before{ content: ""; margin-right: 10px; } 2dt.activo:before{ content: ""; } Lo que estamos haciendo aqui es que por defecto antes de todo dt haya una , pero si este dt esta .activo que esta cambie a .

Dejar un item activado por defecto Si queremos dejar un item abierto por defecto, simplemente le ponemos al dt la clase activo, ya que al cargar la pagina no va a ocultar los dd que esten posteriores a un dt con clase activo:
<dt class="activo">Titulo 3</dt>

1<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio voluptatum expedita 2sunt voluptatibus ratione assumenda quo animi numquam blanditiis asperiores illo
laudantium et quae itaque reiciendis nam ducimus officiis officia?</dd>

Cdigo Final
1 <!DOCTYPE HTML> 2 <html lang="en-US"> <head> 3 <meta charset="UTF-8"> 4 <title></title> <style type="text/css"> 5 *{ font-family: sans-serif; margin: 0;} 6 dl{ margin: 60px auto; width: 600px; } 7 dt, dd{ padding: 20px; } 8 dt{ background: #333333; color: white; border-bottom: 1px solid #141414; 9 border-top: 1px solid #4E4E4E; cursor: pointer; } dd{ background: #F5F5F5; line-height: 1.6em; } 10 dt.activo, dt:hover{ background: #424242; } 11 12 dt:before{ content: ""; margin-right: 10px; } 13 dt.activo:before{ content: ""; } 14 </style> 15</head> 16<body> <dl> 17

<dt>Titulo 1</dt> 18 <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur 19 maxime cupiditate nesciunt molestias itaque vel reiciendis officiis explicabo cum 20impedit dolorem quod minus beatae architecto necessitatibus sed exercitationem aliquam 21omnis!</dd> 22 <dt>Titulo 2</dt> 23 <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates 24 mollitia quos! Dolor cum vitae aperiam deserunt hic quas quidem qui excepturi minima 25repudiandae pariatur id sit dignissimos laborum provident velit!</dd> 26 27 <dt>Titulo 3</dt> 28 <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio voluptatum 29expedita sunt voluptatibus ratione assumenda quo animi numquam blanditiis asperiores 30illo laudantium et quae itaque reiciendis nam ducimus officiis officia?</dd> 31 <dt>Titulo 4</dt> 32 <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto obcaecati 33numquam nemo quasi omnis accusamus illo distinctio doloribus architecto culpa maiores 34blanditiis laborum accusantium assumenda vero necessitatibus optio? Ipsa 35perferendis.</dd> 36 <dt>Titulo 5</dt> 37 <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto obcaecati 38numquam nemo quasi omnis accusamus illo distinctio doloribus architecto culpa maiores 39blanditiis laborum accusantium assumenda vero necessitatibus optio? Ipsa 40perferendis.</dd> </dl> 41 <script type="text/javascript" src="http://code.jquery.com/jquery42latest.js"></script> 43 <script type="text/javascript"> 44 $('dl dd').not('dt.activo + dd').hide(); $('dl dt').click(function(){ 45 if ($(this).hasClass('activo')) { 46 $(this).removeClass('activo'); 47 $(this).next().slideUp(); 48 } else { $('dl dt').removeClass('activo'); 49 $(this).addClass('activo'); 50 $('dl dd').slideUp(); 51 $(this).next().slideDown(); } }); </script> </body> </html>

Si tienes alguna duda ponla en los comentarios, puedes ver el resultado final en este enlace y/o descargar el cdigo fuente desde aqu.