Details

Example Code

<details>
  <summary>Hello World</summary>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore
    magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit
    anim id est laborum.
  </p>
</details>

Result

Hello World

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Options

Accordion

To create an accordion, wrap multiple details elements in an element with the class accordion.

Section 1

This is the first section.

Section 2

This is the second section.

Section 3

This is the third section.

No Width

By default, accordions and standalone details elements have a width of 100%. To revert this behavior, use the class no-width.

Not full width

If the content is longer than the title, the details element will get wider when opened, which could cause content to shift around.

Subtle

You can use a borderless subtle variant by adding the subtle class to either the details element itself or the surrounding accordion wrapper.

Subtle Details

Summary