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/

La entrada Tutorial para crear un acordeón web aparece primero en Vectorial Agencia.