Crea tu web, tutor html, css
 

Acordeón con CSS

Los acordeones en HTML son bloques de contenido en la páginas web que pueden desplegarse o replegarse de forma gradual.

Hay dos versiones:

  • Siempre hay como máximo un bloque desplegado
  • todos los bloques pueden estar desplegados o plegados

Pueden crearse mediante Javasript/CSS o solo con CSS como se muestra en este ejemplo.

El ejemplo que te explico aquí es el primero: siempre habrá un solo bloque abierto, y está construído con CSS.

Se basa en elementos input tipo ratio y en selectores css adyacentes.

Código HTML

El código HTML no tiene ninguna particularidad. Cada bloque ocultable (accordion) está formado por un input tipo radio y dos nodos div uno para el titulo siempre visible y otro para el contenido que es el que se oculta o despliega.

La clave está en el input: el usuario va a activar un input y automáticamente se desactivan los demás. Solo existe un input activo cada vez. Esto permititrá luego seleccionar adecuadametne el bloque que debe mostrarse con CSS.

<div class="accordion">
  <input type="radio" name="select" class="accordion-select" checked />
  <div class="accordion-title"><span>Title</span></div>
  <div class="accordion-content">Content</div>
  <input type="radio" name="select" class="accordion-select" />
  <div class="accordion-title"><span>Title</span></div>
  <div class="accordion-content">Content</div>
  <input type="radio" name="select" class="accordion-select" />
  <div class="accordion-title"><span>Title</span></div>
  <div class="accordion-content">Content</div>
</div>

Los estilos CSS

El estilo CSS utiliza flex paa que los bloques queden en una columna y oculta el contenido que que no cabe (overflow). Sería el contenedor de los accordions.

El selector accordion-toggle es el control input que pliega o despliega el contenido. Para que no se pone su opacity a 0 y color transparente, con z-index nos aseguramos que queda encima y es clickable.Al colocar a todo el ancho del cuadro seiempre será clickable

El selector accordion-header es donde se coloca el texto o titular del bloque plegable. Debe quedar en la misma posición que toggle, pero por debajo, por eso se le sube con margin-top negativo.

El selector accordion-content nos va a definir el etilo del contendio del bloque plegable. La propiedad margin-bottom en negativo lo mantienen oculto.

La magia está en el pseudo-selector :checked y en la relación de contenido. Una vez ue toggle está en checked entran en funcionmiento las reglas que hacen que se despliegue el content al colocar margin-bottom a 0.

la regla .accordion-toggle:checked + .accordion-header + .accordion-content selecciona al bloque content que está justo depués del header que a su vez está justo después del tgole:checked.

@charset "utf-8";
.accordion {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   width: 50%;
   height: auto;
   font-family: Arial, Helvetica, sans-serif;
   border: 1px solid #dedede;
   border-radius: 8px;
   margin:0 auto;
}
/*Contenedor común plegar/desplegar*/
.accordion-toggle,
.accordion-header{
   font-size: 15px;
   width: 100%;
   height: 3em;
   margin: 0;
   line-height: 3em;
   cursor: pointer;
}
/*El botón que pliega/despliega*/
.accordion-toggle {
   opacity: 0;
   background-color: transparent;
   z-index: 1;
   margin-bottom: 2px;
}
/*Bloque para el título*/
.accordion-header{
   background-color: #ffffff;
   color: #7f8787;
   position: relative;
   margin-top: -3em;
   padding-left: 10px
}

/*Bloque replegable con el contenido */
.accordion-content {
   box-sizing: border-box;
   background-color: #f7f7f7;
   color: #7f8787;
   overflow: auto;
   position: relative;
   width: 100%;
   height: 250px;
   margin-bottom: -250px;
   padding: 20px;
   transition: margin 0.3s ease 0.1s;
   }
.accordion-toggle:checked + .accordion-header + .accordion-content {
   margin-bottom: 0;
   margin-right: 0;
}
.accordion-header::before,
.accordion-toggle:checked + .accordion-header::before {
   content: '+';
   display: inline-block;
   text-align: center;
   width: 1em;
   font-size: 1.em;
}
.accordion-toggle:checked + .accordion-header::before {
   content:'-';
}

.accordion-toggle:hover + .accordion-header{
   background-color: #f7f1f1;
}
.accordion-toggle:checked + .accordion-header {
   background-color: #fff;
}

Si quieres ver mejor como funciona puedes poner el accordion-toggle con opacity 1. Te aconsejo que juegues con estas regas, modificándolas para ver como afectan al comportamiento del sistema de accordions.

En las reglas para la pseudo clase ::before he puesto los signos + y - por simplicidad, pero puedes usar iconos para mostrar el estado desplegado replegado.