Skip to content
The HTML Herbarium

/static/herbario/en/especime/details/

Menu

HTM-027 · Interactive

<details>

A block that opens and closes without a line of JavaScript.

The first child is the <summary>, which becomes the trigger; the rest of the content appears when the open attribute is present. The browser handles the click, the keyboard, focus and state. In Chromium-based browsers, the page's own find-in-page can open a closed <details> to show what it found.

The name attribute turns several sibling <details> into a single-open accordion — behaviour that needed script until the day before yesterday.

<details name="gaveta">
  <summary>Label and rarity</summary>
  <p>Forms · forgotten</p>
</details>

<details name="gaveta">
  <summary>Notable attributes</summary>
  <p>value, min, max, low, high, optimum</p>
</details>
{esc(legenda)}
Label and rarity

Interactive · common

Notable attributes

open and name

Where it was collected

HTML Living Standard, among the interactive elements.

Living specimen · opening one closes the others, because all three share a name