<details>

The <details> element creates a native disclosure widget and is used as a building block for accordions and dropdowns, since it provides a native way to create collapsible content sections with keyboard navigation and screen reader support without the need for JavaScript.

Accordion Example

Check out Accordion documentation pages for more details and examples.

<details name="accordion-group">
  <summary>Accordion 1</summary>
  <p>
    This content is hidden by default and revealed when you click the summary.
    Accordions are great for organizing content into collapsible sections.
  </p>
</details>

<hr />

<details name="accordion-group" open>
  <summary>Accordion 2</summary>
  <ul>
    <li>This accordion starts in the open state.</li>
    <li>Use the <code>open</code> attribute to expand by default.</li>
    <li>Click the summary to collapse.</li>
    <li>Great for FAQ sections or settings panels.</li>
  </ul>
</details>

Dropdown Example

Check out Dropdown documentation pages for more details and examples.

<details>
  <summary aria-haspopup="menu">Dropdown</summary>
  <ul role="menu">
    <li><a role="menuitem" href="#">Solid</a></li>
    <li><a role="menuitem" href="#">Liquid</a></li>
    <li><a role="menuitem" href="#">Gas</a></li>
    <li><a role="menuitem" href="#">Plasma</a></li>
  </ul>
</details>