Menú adicional

Tursos

Tutoriales y cursos de desarrollo web en español

Usted está aquí: Inicio / Tutoriales / Como hacer un Acordeón (accordion) con jQuery y CSS

Como hacer un Acordeón (accordion) con jQuery y CSS

publicado el

 

Descargar

En este tutorial haremos un acordeón vertical usando jQuery con un código bastante minimalista y facil de entender, usaremos CSS para darle decoración y mejorar la experiencia de usuario.

Estructura HTML

Usaremos con una lista de definición o definition list (dl) para manejar la estructura de los contenidos, una vez comprendas el funcionamiento del código podrás 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>

    <dt>Titulo 2</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates mollitia quos! Dolor cum vitae aperiam deserunt hic quas quidem qui excepturi minima repudiandae pariatur id sit dignissimos laborum provident velit!</dd>

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

    <dt>Titulo 4</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>

    <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 código, si deseas puedes manejarlo en un JS aparte, pero para el ejemplo lo haremos todo junto:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

</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:

$('dl dd').not('dt.activo + dd').hide(); 
$('dl dt').click(function(){

});

Dentro del evento de click le pondremos una condición:

 $('dl dt').click(function(){
   if ($(this).hasClass('activo')) {
        $(this).removeClass('activo');
        $(this).next().slideUp();
   } else {
        $('dl dt').removeClass('activo');
        $(this).addClass('activo');
        $('dl dd').slideUp();
        $(this).next().slideDown();
   }
});

(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 vendría a ser el ‘dd’ adyacente (que esta mostrandose), se oculte (linea 25).

En caso contrario (que muy probablemente vendría a ser el estado por defecto) al hacerle clic, lo primero que hará es quitarle .activo a todos los demás ‘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 tendríamos completamente funcional, sin embargo la experiencia no es tan agradable, para mejorar esto usaremos algo de CSS:

*{ font-family: sans-serif; margin: 0;}
dl{ margin: 60px auto; width: 600px; }
dt, dd{ padding: 20px; }
dt{ background: #333333; color: white; border-bottom: 1px solid #141414; border-top: 1px solid #4E4E4E; cursor: pointer; }
dd{ background: #F5F5F5; line-height: 1.6em; }
dt.activo, dt:hover{ background: #424242; }

Va quedado mejor, pero podemos hacer mas aun, le vamos a añadir unas flechitas con la ayuda de la pseudo-clase :after.

dt:before{ content: "â–¸"; margin-right: 10px; }
dt.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>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio voluptatum expedita sunt voluptatibus ratione assumenda quo animi numquam blanditiis asperiores illo laudantium et quae itaque reiciendis nam ducimus officiis officia?</dd>

Código Final

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		*{ font-family: sans-serif; margin: 0;}
		dl{ margin: 60px auto; width: 600px; }
		dt, dd{ padding: 20px; }
		dt{ background: #333333; color: white; border-bottom: 1px solid #141414; border-top: 1px solid #4E4E4E; cursor: pointer; }
		dd{ background: #F5F5F5; line-height: 1.6em; }
		dt.activo, dt:hover{ background: #424242; }

		dt:before{ content: "â–¸"; margin-right: 10px; }
		dt.activo:before{ content: "â–¾"; }
	</style>
</head>
<body>
	<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>

		<dt>Titulo 2</dt>
		<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates mollitia quos! Dolor cum vitae aperiam deserunt hic quas quidem qui excepturi minima repudiandae pariatur id sit dignissimos laborum provident velit!</dd>

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

		<dt>Titulo 4</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>

		<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>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript">
	  $('dl dd').not('dt.activo + dd').hide();
       $('dl dt').click(function(){
          if ($(this).hasClass('activo')) {
               $(this).removeClass('activo');
               $(this).next().slideUp();
          } else {
               $('dl dt').removeClass('activo');
               $(this).addClass('activo');
               $('dl dd').slideUp();
               $(this).next().slideDown();
          }
       });
	</script>
</body>
</html>

Si tienes alguna duda ponla en los comentarios, puedes  descargar el código fuente desde aquí.

Interacciones con los lectores

Comentarios

  3. Rauto dice

    Existe alguna forma de ponerles id para poder linkear con cada titulo, porque yo probe y no logre que funcionara.
    Saludos.

    Responder

  4. Agustin dice

    y como puedo hacer para que uno quede activado por defecto? me explico? osea que el titulo 1 al entrar este abierto

    Responder

  5. juan dice

    Muy bueno el tuto para los que estamos empezando en el mundo de php, muy bueno, mi pregunta es como se podria hacer si el texto es muy largo de un titulo, que solo tenga un maximo de caracetes y si se pasa que se mueva hacia arriba o hacia abajo moviendolo por el lado como se hace en una ventana de texto, se podria hacer eso?
    Otra cosa, no tienen ningun tutorial de un calendario donde yo pueda poner las tareas del dia, borrar, inserter tareas? muchas gracias de ante mano.
    juan

    Responder

    • Josue Ochoa dice

      Seteale un width a ese texto y se va a colapsar solo, sobre un tutorial de tareas, hice uno hace algun tiempo, pero es buena idea la que sea con calendario, gracias por la sugerencia.

      Responder

  6. David dice

    Buenas Josue!

    En primer lugar, te felicito por tu buena aportación en tus conocimientos y añadir dos cosas mas…

    – Grácias por facilitar las cosas con este blog magnífico! (después de probar tantos tutoriales, he visto que éste es el más dinámico, directo y bien explicado) Ya que en otros me he visto en algun problema de incompatibilidad..

    – Me gustaría estar mas tiempo por aquí por que estoy seguro de que será el sitio que puedo terminar de aprender (sobretodo… «empezar y terminar»), ya que me quedado a medias en varios tutoriales diferentes.

    Te saluda David desde Girona (España)

    Responder

  9. Alejandro Aponte dice

    Como puedo poner varia listas dentro de un item! Por Ejemplo: Comidas y que adentros esten varios tipos.??

    Responder

    • josueochoa dice

      Es simple codigo HTML, solo ponlo dentro del «dd», ejemplo:

      Titulo 5

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, debitis.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, facilis.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, quo.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, dicta?

      Responder

  11. Mc Bryan dice

    Gracias Muy Bueno Me Sirvio
    Explico: Tengo un formulario dividido en varias partes con el acordeon, en
    algunos campos tengo un «required» (HTML5) como hago que cuando la validacion del required
    se active se me abra esa pestaña y muestre el campo
    Gracuas

    Responder

    • josueochoa dice

      Pues, tendrías que validar con JavaScript y no con la validación nativa del navegador, asi tendrías mucho mas control de cuando esta se dispara.

      Responder

  12. Edd Marsuli dice

    Mil gracias por este tutorial. bastante útil didáctico y por cierto muy bien explicado.

    Tengo la siguiente inquietud…

    El uso que le di al acordeón fue que Agregue un extenso currículo a cada Item y como titulo el nombre de la persona,
    Desde otra pagina, a través de un Hipervínculo, quiero acceder acceder a la pagina que contiene el acordeón y que esta muestre un item especifico.

    ¿Que tendría que hacer para que apareciera el Item especifico ya desplegado?

    Desde ya muchas gracias.

    Responder

  13. Verónica Martínez dice

    Hola. Quiero añadir este acordeón a mi página web pero a la hora de poner mas información o añadir mas de 3 botones, me da un error, como si tuviese un límite de texto o de información. Soy principiante en esto y la verdad no tengo mucha idea de cómo solucionarlo.
    Muchas gracias

    Responder

  14. Daeron dice

    Este menu es justo lo que andaba buscando para una idea. Mi duda es como puedo adaptarlo para usarlo en un movil, ojalá sin uso de javascript. Me explico, tengo un menu para mostar datos como formularios de contacto y texto en general, pero al hacer tap sobre un menu se recarga la página, el efecto se realiza pero al momento de soltar el tap me redirecciona al comienzo de la pagina.

    Responder

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.