Tutorial para crear un acordeón web

Incluso si usted no ha oído hablar de un acordeón, es probable que haya visto uno en un sitio web en algún momento. Si es ingeniero, sabe que el  concepto es bastante simple: una serie de paneles que se expanden y se contraen cuando se hace clic.

Lo llamamos acordeón porque esa es la forma en que se ve cuando se cambia entre los estados: abierto y cerrado.

Conseguir este efecto es algo que tradicionalmente se realiza con Javascript o jQuery. Pero CSS también tiene una forma de seleccionar los elementos y se le conoce como checkbox hack.

¡Vamos a explicarlo en detalle!

La estructura de nuestro HTML sería esta:

<div class="accordion">
     <ul class="accordion__wrapper">
         <li class="accordion__header">
             <h1>Accordion Header</h1>
         </li> <!-- accordion__header -->
         <li class="accordion__item">
             <input type="checkbox" checked>
             <span>&#94;</span>
             <h2>Accordion Panel 1</h2>
             <div class="panel">
                 <p>Your content</p>
             </div> <!-- panel -->
         </li> <!-- accordion__item -->
         <!-- Repetir -->
     </ul> <!-- accordion__wrapper -->
 </div> <!-- accordion -->

Su patrón básicamente es Contenedor > Inicio de la lista > Header > Elemento > Contenido

El <input type=”checkbox” checked> Es el que verifica cuando se le hace clic a la casilla si esta seleccionada el Contenido no se mostrara.

Esta sería la estructura del CSS

.accordion {
 //CONTENEDOR_PRINCIPAL
 }
 
   .accordion__wrapper {
   //LISTA
   }
 
   .accordion__header,  .accordion__item {
   //CABEZERA_ITEMS_LISTA
    }
 
   .accordion__header {
   //CABEZERA
   }
 
   .accordion__item {
   //ITEMS_LISTA
   }
 .accordion__item span {
 //SPAN_ICONO
 }
 .accordion__item input[type=checkbox]:checked ~ div.panel {
 //CONTENIDO_OCULTO
 }
 .accordion__item input[type=checkbox]:checked ~ span {
 //CONTENIDO
 }

Empecemos a dar estilo a nuestro acordeón

.accordion {
     margin: 0 auto;
     width: 50%;
 }

Con esto colocaremos el contenedor centrado y al 50% de la pantalla

.accordion__wrapper {
     border: 1px solid #eaeaea;
     border-radius: 4px;
     list-style: none;
     margin: 1rem 0;
     width: 100%;
 }

Como nuestro contenedor principal ocupa el 50% de la pantalla a nuestra lista debe ocupar el 100% de nuestro contenedor principal con el list-style:none; quitamos los puntos que trae por defecto una  lista desordenada

.accordion__header, .accordion__item {
     float: left;
     padding-left: 1rem;
     padding-right: 1rem;
     padding-top: 1rem;
     position: relative;
     width: 100%;
 }

Nuestros estilos de cabecera e ítems comparten algunos estilos por eso los llamamos juntos

.accordion__header {
     background: #ff9e2c;
     border-bottom: 1px solid #f88600;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     color: #fff;
     padding-bottom: 1rem;
 }

Estos son los estilos únicos de nuestra cabecera que le dará un color naranja

.accordion__item {
     background: #fff;
     border-bottom: 1px solid #eaeaea;
     margin-bottom: 1px;
     padding-bottom: 0.5rem;
 }

Y aquí los estilos únicos de nuestros ítems

.accordion__item span {
     color: #ff9e2c;
     margin-top: 1rem;
     position: absolute;
     right: 1rem;
     top: 0;
     transition: all 0.2s ease-in;
 }

Dentro el span colocaremos nuestro icono que indicará si el acordeón está cerrado o abierto

 .accordion__item input[type=checkbox] {
     position: absolute;
     cursor: pointer;
     width: 100%;
     height: 100%;
     z-index: 1;
     opacity: 0;
 }

Ocultamos el checkbox para que nuestro ítem sea quien de clic para activar o desactivar el acordeón

.accordion__item input[type=checkbox]:checked ~ div.panel {
     float: left;
     margin: 5px 0;
     max-height: 0;
     opacity: 0;
     transform: translate(0, 50%);
 }

Desactivamos el panel del contenido mientras este seleccionado

.accordion__item input[type=checkbox]:checked ~ span {
     transform: rotate(180deg);
 }

Y por último rotamos nuestro ícono para demostrar si el acordeón está abierto o cerrado

Los acordeones web, bajo una estrategia en su portal, pueden ser parte de buenas experiencias web para sus clientes, aquí puede incorporar y desplegar información relevante de su marca.  Recuerde que es necesario asesorarse de expertos que lo guíen en la correcta implementación del código.

Si necesita soluciones web a la medida para su portal empresarial, conozca sobre  nuestra experiencia aquí : http://www.vectorial.co/soluciones-web/