Aprende como hacer un acordeón desplegable con HTML, CSS y Jquery.
En previos artículos, casi siempre hemos utilizado librerías de terceros para implementar diversos elementos de nuestra web. Esta vez lo implementaremos nosotros desde cero.
Se trata de un elemento muy usual en las web, donde al pulsar en un determinado sitio, barra, botón, etc, se expande más información relacionada que previamente estaba oculta, lo que se conoce como estilo acordeón. Muy parecido a lo que hace la librería Jquery UI y sus accordions https://jqueryui.com/accordion/
Para implementar este interesante elemento utilizaremos la librería de javascript Jquery, html y css.
Este sería el resultado final:
See the Pen Example Accordion by Enrique (@enriquearkas) on CodePen.0
Es muy sencillo de implementar. Sólo debemos saber lo básico de html, css, y un poco de las animaciones de jquery.
Como hacer un Acordeón con HTML, CSS y Javascript (Jquery)
Codigo HTML:
<div id="container-main">
<h1>Mejores Jugadores Liga BBVA</h1>
<div class="accordion-container">
<a href="#" class="accordion-titulo">Messi<span class="toggle-icon"></span></a>
<div class="accordion-content">
<img src="http://e0.365dm.com/15/05/660x350/champions-league-barcelona-bayern-munich-soccer-messi_3299830.jpg?20150506214236" alt=""/>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="accordion-container">
<a href="#" class="accordion-titulo">Cristiano<span class="toggle-icon"></span></a>
<div class="accordion-content">
<img src="http://www.abc.es/Media/201301/10/cristiano-ronaldo--644x362.jpg" alt=""/>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
Codigo CSS:
body{
background: #ecf0f1;
}
#container-main{
margin:40px auto;
width:95%;
min-width:320px;
max-width:960px;
}
#container-main h1{
font-size: 40px;
text-shadow:4px 4px 5px #16a085;
}
.accordion-container {
width: 100%;
margin: 0 0 20px;
clear:both;
}
.accordion-titulo {
position: relative;
display: block;
padding: 20px;
font-size: 24px;
font-weight: 300;
background: #2c3e50;
color: #fff;
text-decoration: none;
}
.accordion-titulo.open {
background: #16a085;
color: #fff;
}
.accordion-titulo:hover {
background: #1abc9c;
}
.accordion-titulo span.toggle-icon:before {
content:"+";
}
.accordion-titulo.open span.toggle-icon:before {
content:"-";
}
.accordion-titulo span.toggle-icon {
position: absolute;
top: 10px;
right: 20px;
font-size: 38px;
font-weight:bold;
}
.accordion-content {
display: none;
padding: 20px;
overflow: auto;
}
.accordion-content p{
margin:0;
}
.accordion-content img {
display: block;
float: left;
margin: 0 15px 10px 0;
width: 50%;
height: auto;
}
@media (max-width: 767px) {
.accordion-content {
padding: 10px 0;
}
}
Como vemos en el código HTML, tenemos dos contenedores <div> con clase accordion-container, que contendrán toda la información de ese ítem, característica, sección, etc. En concreto tenemos un elemento <a> que representa el título, y es la barra horizontal con el nombre del jugador, y otro elemento div con clase accordion-content que en principio está oculta y que contiene una imagen del jugador y texto.
En este ejemplo se trata de un listado con dos jugadores, que al hacer click en cada uno de ellos se expande información relacionada. Si nos fijamos, también se cambia el icono de la derecha de la barra con “+” y “-“según este cerrado o abierto, esto lo logramos con código css.
Por último, queda lo más importante, implementar mediante jquery la acción de hacer click en la barra de título y como consecuencia se visualice u oculte la información según se encuentre visible o no el contenedor de información .accordion-content”
Codigo Jquery:
$(".accordion-titulo").click(function(){
var contenido=$(this).next(".accordion-content");
if(contenido.css("display")=="none"){ //open
contenido.slideDown(250);
$(this).addClass("open");
}
else{ //close
contenido.slideUp(250);
$(this).removeClass("open");
}
});
En primer lugar guardamos en la variable “contenido” el objeto div que contiene la información, en este caso de uno de los jugadores, según donde hayamos pulsado, a través de la función next(), que coge el primer elemento hermano con clase .accordion-content
Seguidamente comprobamos si está oculto o no, y dependiendo del caso mostramos u ocultamos a través de dos funciones de jquery, con el objetivo de que el cambio no se produzca de forma brusca, sino animada.
slideDown() => Muestra el contenido de forma animada (slide).
slideUp() => Esconde el contenido de forma animada (slide).
Así de fácil es implementar nuestra propio estilo acordeón sin tener que recurrir a librerías externas como Jquery UI.
¿Se pude de alguna forma corregir el error que provoca que cuando es desplegado el contenido de un articulo la pagina te manda de vuelta al inicio?
Gracias :3
Me sucede el mismo error ya que agrege más opciones para abrir me lleva al top pero hace el slidedown. Pudiste resolverlo?
Hola, la solución esta en quitar las opciones por defecto al hacer click.
Hay que añadir: e.preventDefault();
Se puede ver ya en el código de codePen.
Saludos
Gracias totales hermano!! Me funciona de maravilla.
Hola, dónde debo pegar esto? en el jquery.js? gracias.
Hola Enrique, podrías por favor ayudarme explicándome en dónde debo poner este código? en el .jquery o css o html? muchas gracias.
Muy buen articulo Enrique, ojala hagan un videotutorial acerca de ello, gracias por el aporte.
No me sale el ejemplo, no hace el efecto acordeon
has cargado la librería Jquery?
En mi caso tampoco pude hacerlo, no logro el efecto acordeón.
Utilizo wordpress, ¿como debería realizar la llamada al JS desde mi plantilla y desde que parte de esta?
Cual es la librería a importar y como realizarlo en wordpress?
Saludos y disculpa la molestia.
No se abre el contenido, tengo linkeado el js en mi de la siguiente manera:
Y el container.js es el que ponen en el ejemplo que está primero, porque si se fijan, el que el pone en el ejemplo y el que está abajo en la guía, son diferentes…
Espero alguien me pueda ayudar ya que veo que a varios les ha funcionado y la verdad no veo qué estoy haciendo mal.
Hola. Supongo que lo solucionaste. Sino, hay que poner la librería antes de tu js. .
descargala de http://jquery.com/download/
Saludos.
Te adoré… :D
De nada!
olvídalo, ya me dió, muchas gracias!!!
Pon el script antes de finalizar el body, no lo invoques, copialo directo.
$(«.accordion-titulo»).click(function(){
var contenido=$(this).next(«.accordion-content»);
if(contenido.css(«display»)==»none»){ //open
contenido.slideDown(250);
$(this).addClass(«open»);
}
else{ //close
contenido.slideUp(250);
$(this).removeClass(«open»);
}
});
ya cargue las librerias y copie el codigo js de codepen pero no me sale, entonces que tengo que quitar y añadir?
Pregunta Enrique.
Como puedo hacer para que, cuando abro un content (abierto), se cierren los otros ó el que este abierto anteriormente?
Para que abra un solo content a la vez.
Se entinde?. Gracias.
por alguna extraña razon no me funciona
a mí tampoco me funciona, creé la web pero al momento de intentar desplegar algún menú no pasa nada. Por favor ayuda.
Gracias.
jQuery(document).ready(function(){
$(«.accordion-titulo»).click(function(){
var contenido=$(this).next(«.accordion-content»);
if(contenido.css(«display»)==»none»){ //open
contenido.slideDown(250);
$(this).addClass(«open»);
}
else{ //close
contenido.slideUp(250);
$(this).removeClass(«open»);
}
});
});
recuerda importar el jquery.
De donde se importa?
Hola que tal Stefan, Recuerda que este ejercicio utiliza JQuery como tal , entonces lo que tienes que hacer es importarla, en mi caso yo me baje el JS de jQuery entonces lo que hago es poner en mi CODIGO:
pero tambien cabe la posibilidad de cargarlo de desde web con las CDN de google, seria algo así
ahi lo que hace es importar la libreria Jquery…. con esto ya deberia de funcionarte , saludos!
Una pregunta…
Como le puedo hacer para que no puedan abrir todas?
Que si tengo una abierta y quiero abrir otra, se cierre la primera que abrí?
Lo único que tienes que hacer es, dentro del if en las dos primeras instrucciones, agregar:
$(«.accordion-titulo»).removeClass(«open»);
$(«.accordion-content»).slideUp(250);
Espero que te sirva.
Como hago para que cierre la que este abierta antes de abrir otra?? Gracias
Buenas tardes dime por favor donde coloco el Codigo Jquery: en el HTML gracias
Hola, mi problema es el siguiente yo dentro de la acordeon quiero poner un boton pero al momento de ponerle on click no funcionada dentro del acordeon, a que se debe eso? no puedo usar botones y utilizarlos dentro de este ?
hola, estoy teniendo un problema lo que sucede es que implemente el acordeon en un ciclo en php para que me trajera datos de una base en mysql, entonces por ende se me pusieron muchos acordeones y mucho scroll, el problema se origina cuando abro un acordeón la pagina se me va a la parte superior del scroll, como si tuviese un ancla, alguen sabe como solucionarlo?
hola tengo el mismo problema
ya somos dos;tu ya lo solucionastes?bueno en realidad lo que me pasa a mi es que no se me logra quedar abierto me abre, pero se cierra en menos de 5 segundos
mira esta es la solucion;asi lo solucione yo para un for;solo quitare lo del for y te servira o si lo necesitas pues usalo
No se donde ponerlo para que no me suba la pagina
jQuery(document).ready(function()
{
$(«.accordion-titulo»).click(function()
{
var contenido=$(this).next(«.accordion-content»);
/*
if(contenido.css(«display»)==»none»)
{ //open
$(«.accordion-titulo»).removeClass(«open»);
$(«.accordion-content»).slideUp(1000);
contenido.slideDown(500);
$(this).addClass(«open»);
}
else{ //close
contenido.slideUp(250);
$(this).removeClass(«open»);
}
*/
contenido.toggle();
});
});
hay ya te dije como;solo tienes que quitarle el for;y si tienes un href quitaselo
Lo único que tienes que hacer es, dentro del if en las dos primeras instrucciones, agregar:
$(«.accordion-titulo»).removeClass(«open»);
$(«.accordion-content»).slideUp(250);
Espero que te sirva.
Exelente!!Falcon,Muy buen trabajo gracias.!!!!
no me funciona
hola buenas tardes
¿como puedo abrir automáticamente al cargar la pagina el primer content?
saludos y gracias
Holaa! no puedo descargar jquery, no me lo quiere abrir, ¿Qué hago? ayudaa, es un proyecto de la escuelaa
Holaa! no puedo descargar jquery, no me lo quiere abrir, ¿Qué hago? ayudaa
Excelente!!!!! lo use y anduvo muy bien, incluso le agregue el código para cerrar cuando se abre otro!
Mil gracias!!!!!
podes compartir el codigo para cerrar cuando se abre otro porfa!!
Hola! necesito ayuda. tengo problemas debido a que no me resulta el menu acordeon.. hice todo paso a paso… alguien sabe donde pueda estar el error?
por que no me funciona, tengo problemas con el jquery, trabajo con brackets y me muestra herrores.
Hola, te queria preguntar como harias esto dentro de una tabla. Gracias