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:
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:
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.
Esta entrada ha sido actualizada el 05/07/2018.
muy limpio y sencillo el código. muchas gracias por tu iluminación.
Excelente tutorial, es muy práctico para agregar en sitios que no disponemos de mucho espacio.
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
Para subcategorías a lo mejor te viene mejor utilizar este plugin empleando listas anidadas:
http://www.jose-aguilar.com/blog/simple-accordeon-jquery/