Saltar al contenido principal

Desplegables

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

Ejemplo

HTML
<h3>
    <button aria-expanded="false">
        Sección 1
        <svg viewBox="0 0 10 10" aria-hidden="true">
            <rect class="vert" height="8" width="2" y="1" x="4" />
            <rect height="2" width="8" y="4" x="1" />
        </svg>
    </button>
</h3>
<div hidden>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<h3>
    <button aria-expanded="false">
        Sección 2
        <svg viewBox="0 0 10 10" aria-hidden="true">
            <rect class="vert" height="8" width="2" y="1" x="4" />
            <rect height="2" width="8" y="4" x="1" />
        </svg>
    </button>
</h3>
<div hidden>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
CSS
h3 {
    border-top: 1px solid;
    margin: 0;
}

h3 button {
    all: inherit;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0.5em 0;
}

h3 button svg {
    height: 1em;
    margin-left: 0.5em;
}

h3 button:focus svg {
    outline: 2px solid;
}

[aria-expanded="true"] .vert {
    display: none;
}
JavaScript
(function() {
    const headings = document.querySelectorAll('h3');

    Array.prototype.forEach.call(headings, h => {
        let btn = h.querySelector('button');
        let target = h.nextElementSibling;

        btn.onclick = () => {
            let expanded = btn.getAttribute('aria-expanded') === 'true';

            btn.setAttribute('aria-expanded', !expanded);
            target.hidden = expanded;
        }
    });
})()

En este ejemplo tenemos:

  • el encabezado de la sección que a su vez contiene un botón.
  • el atributo aria-expanded para indicar si el contenido está contraído o expandido.
  • un icono SVG con el atributo aria-hidden="true" para ocultarlo a los lectores de pantalla.
  • un elemento div con el atributo hidden para ocultar el contenido hasta que se pulsa el botón.

Créditos: Este código está basado en el ejemplo Collapsible sections de Heydon Pickering.