Saltar al contenido principal

Desplegables

Las regiones desplegables permiten mostrar u ocultar contenido en una página pulsando sobre un botón.

Ejemplo

Título

Contenido de demostración.

Nota: Este ejemplo utiliza el plugin jQuery accessible hide/show using ARIA de Nicolas Hoffmann.

Este plugin transforma un código como este:

HTML
<h2 class="js-expandmore">Título</h2>
<div class="js-to_expand">
   Contenido de demostración.
</div>

En este otro:

HTML
<h2 class="js-expandmore">
  <button aria-controls="expand_1" aria-expanded="false" class="expandmore__button">Título</button>
</h2>
<div id="expand_1" class="js-to_expand" aria-labelledby="label_expand_1">
   Contenido de demostración.
</div>

Se incluye un botón con el texto del encabezado y el atributo aria-expanded para indicar si el contenido está contraído o expandido actualmente.

También añade un atributo aria-controls junto a un id para identificar al elemento controlado por este botón.