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.

First details

The details element can show or hide additional content natively.

Second details

The summary element defines the visible text that toggles each disclosure block.

HTML

<details dir="ltr">
  <summary>First details</summary>
  <p>The details element can show or hide additional content natively.</p>
</details>

<details dir="ltr">
  <summary>Second details</summary>
  <p>The summary element defines the visible text that toggles each disclosure block.</p>
</details>

HTML details playground

Ask AI

Details NUMBER

Details __NUMBER__

Details NUMBER