Curso de HTML / Crear contenido desplegable con details y summary

details y summary crean un bloque que el usuario puede abrir y cerrar sin programar ese comportamiento con JavaScript. Son útiles para explicaciones complementarias o instrucciones extensas que no todos necesitan consultar. El texto de summary debe permitir prever qué contenido se mostrará.

Crear un bloque desplegable básico

Coloca este fragmento dentro de body de un documento HTML completo y ábrelo en un navegador:

<details>

  <summary>View opening hours</summary>

  <p>We are open Monday through Friday, 9 a.m. to 6 p.m.</p>

</details>

Inicialmente se presenta el resumen “View opening hours”. Actívalo para mostrar el párrafo y vuelve a activarlo para cerrarlo. El horario es ficticio y solo demuestra el comportamiento del elemento.

summary debe ir al principio de details. El navegador proporciona el estado de apertura y la interacción básica. El marcador, los bordes y el aspecto del foco pueden variar entre navegadores o por CSS; comprueba la función en lugar de exigir una apariencia idéntica.

Elegir el estado inicial con open

Añade open si la información debe comenzar desplegada:

<details open>

  <summary>Delivery information</summary>

  <p>Arrival times vary by area.</p>

</details>

El usuario sigue pudiendo cerrarla y volver a abrirla. open es booleano: open="false" continúa presente y no significa cerrado. Para iniciar el bloque plegado, elimina el atributo. Los atributos booleanos de HTML aplican el mismo principio a checked.

Compara los dos ejemplos por separado al volver a abrir el archivo. Si esperabas un panel cerrado y comienza abierto, inspecciona la presencia del atributo antes de añadir scripts o reglas visuales para ocultarlo.

Escribir resúmenes que orienten

Si hay varios bloques, cada resumen debe identificar la información concreta que contiene. Repetir “Más información” obliga a abrirlos para saber cuál interesa. Expresa el asunto o la pregunta sin depender del texto de otro panel.

Una pregunta frecuente puede adaptarse a este patrón, pero si la respuesta es breve y útil de inmediato, dejarla visible puede ahorrar una acción. No ocultes una condición que todo usuario debe leer como si fuera información prescindible.

Tampoco conviertas el elemento en cualquier tipo de componente solo por su apariencia. Un menú o unas pestañas tienen otras expectativas de interacción. La definición de details en WHATWG describe su función como desplegable.

Comprobar teclado y foco

Utiliza Tab para llegar al resumen y comprueba que puedes reconocer dónde está el foco. Prueba Enter y Espacio por separado para abrir y cerrar el bloque. Conserva el resumen básico como texto, sin introducir enlaces o botones que compitan con su activación.

Si añades CSS, repite la prueba: quitar el marcador o el contorno sin una alternativa comprensible puede dificultar la operación. Comprueba también un ancho estrecho y texto ampliado. La práctica de accesibilidad permite ampliar la revisión del foco y de los nombres.

Revisar un desplegable que no responde

Confirma que summary está dentro de details, al principio, y que ambos tienen sus cierres correctos. Si solo falla después de aplicar estilos, revisa qué elemento recibe el clic y si las reglas han ocultado el área activable.

Distingue el comportamiento nativo de las interacciones que añadas después. Un script o un control adicional puede introducir necesidades de foco que HTML no resuelva por ti. Las referencias de details y summary de MDN ayudan a comprobar estructura y atributos antes de aumentar la complejidad.