Accordion me con jQuery

En este artículo vamos a ver como crear un menú accordion con jQuery sin necesidad de utilizar plugins ni código de terceros. Realizar un menú accordion es más sencillo de lo que parece utilizando una función de jQuery muy útil para mostrar u ocultar contenido escondido con algo de efecto.

Estamos hablando de la función slideToggle(). Esta función incluida en la librería jQuery nos permite principalmente tener elementos escondidos para mostrarlos al hacer click en un elemento padre o similar. Al volver a hacer click se vuelve a ocultar.

Aspecto visual

En el ejemplo que vamos a ilustrar veremos como crear un menú accordion vertical con el siguiente formato:

Accordeon me con jQuery

Como puedes observar los estilos son realmente simples ya que el objetivo de este artíulo no es realizar un menú accordion chulo sino su funcionalidad. El diseño lo dejo a vuestra imaginación.

Inclusión de los estilos y código JavaScript necesarios para hacer funcionar el accordion

Para implementar un menú accordion vertical sencillo en vuestra Web necesitaréis incorporar en el <head> de vuestra página los estilos necesarios, la librería jQuery y el código que desplegará y ocultará las listas de los elementos padre del menú.

La inclusión de la librería jQuery y la captura del evento click de los elementos del accordion serán necesarios y lo puedes ver a continuación:

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
    $('.block h2').on('click',function(){
        $(this).parent().find('ul').slideToggle('slow');                          
    });
});
</script>

En el ejemplo estamos usando los siguientes estilos que puedes agregar a tu hoja de estilos directamente:

.block {
    width:100%;
    float:left;
    margin-bottom:1px;
}
 
.block h2 {
    width:96%;
    float:left;
    background-color:#336600;
    color:#FFFFFF;
    cursor:pointer;
    margin:0px;
    padding:5px;
}
 
.block ul {
    width:100%;
    float:left;
    margin: 0;
    padding: 0;
    display:none;
}
 
.block ul li {
    background-color: #33CC00;
    border-bottom: 1px solid #336600;
    float: left;
    list-style: none outside none;
    padding: 5px;
    width: 96%;
}

Código HTML que debes añadir dentro del body de tu página

El código HTML que deberemos añadir dentro del <body> será algo como lo siguiente:

<div id="sidebar" class="col-xs-12 col-lg-3">
    <div class="block">
        <h2>Clientes</h2>
        <ul>
          <li>Cliente 1</li>
          <li>Cliente 2</li>
          <li>Cliente 3</li>
        </ul>
    </div>  
    <div class="block">
        <h2>Pedidos</h2>
        <ul>
          <li>Pedido 1</li>
          <li>Pedido 2</li>
          <li>Pedido 3</li>
        </ul>
    </div> 
</div>

En este caso específico hemos montado el accordion en una sidebar, por ese motivo está dentro de un contenedor con id=»sidebar», por tema de maquetación que veremos en el ejemplo en funcionamiento. En lo que te tienes que fijar es en el contenido de dentro. Si te fijas, tenemos dos contenedores prácticamente idénticos, uno muestra clientes y el otro pedidos.

Ver demo Descargar

Esta entrada ha sido actualizada el 05/07/2018.

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(13 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

4 respuestas a “Accordion me con jQuery”

  1. david dice:

    muy limpio y sencillo el código. muchas gracias por tu iluminación.

  2. J-Sequeiros dice:

    Excelente tutorial, es muy práctico para agregar en sitios que no disponemos de mucho espacio.

  3. fran dice:

    Interesante, pero si cambiamos de página se cierra de nuevo la botonera. Cómo hacemos para que se queden abierta la parte que hemos abierto, y otra, cómo hacemos subcategorías. Gracias

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.

Ver más sobre