Acordeón

Estructura del acordeón

El acordeón está formado principalmente por dos elementos:

• Encabezado: Es el título o etiqueta que identifica el contenido de la sección. También hace la función de botón para mostrar y ocultar el contenido.
• Panel: Es la sección donde se muestra el contenido asociado al encabezado del acordeón. Puede estar visible u oculto.

Details y summary

Podemos crear un acordeón utilizando los elementos de HTML <details> y <summary>.

El elemento <summary>contiene el título de cada panel y actúa como botón de apertura y cierre. Mientras que el elemento <details> se despliega para mostrar el contenido.

<details>
  <summary>Panel #1</summary>
  <div>Contenido del panel #1.</div>
</details>
<details>
  <summary>Panel #2</summary>
  <div>Contenido del panel #2.</div>
</details>
<details>
  <summary>Panel #3</summary>
  <div>Contenido del panel #3.</div>
</details>

Interacción con teclado

• Tab y Shift + Tab para moverse por los diferentes elementos enfocables.
• Intro o Espacio para expandir o contraer los paneles.