HTML details playground

Explore details with controls to edit each summary and content, add new blocks, and test the name attribute for JavaScript-free exclusive accordions.

Text direction

With logical properties, it is important to check how results change in languages written left to right and right to left.

Left to right Right to left

name attribute

The name attribute groups multiple details elements. When they share the same name, the browser keeps only one in that group open.

Use the same name on all

Details

Details 1

summary

summary is the visible, clickable text that opens or closes each details element.

content

content represents the content inside details; this lab generates it as a paragraph.

Details 2

summary

summary is the visible, clickable text that opens or closes each details element.

content

content represents the content inside details; this lab generates it as a paragraph.

Primer details

El elemento details permite mostrar u ocultar contenido adicional de forma nativa.

Segundo details

El elemento summary define el texto visible que activa cada bloque desplegable.

HTML

<details dir="ltr">
  <summary>Primer details</summary>
  <p>El elemento details permite mostrar u ocultar contenido adicional de forma nativa.</p>
</details>

<details dir="ltr">
  <summary>Segundo details</summary>
  <p>El elemento summary define el texto visible que activa cada bloque desplegable.</p>
</details>

Details __NUMBER__

Details NUMBER