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:
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<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/660×350/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–644×362.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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(«.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.