<Details /> <Summary /> <Content />

Basic Disclosure

The foundational building blocks. A summary acts as the visible trigger, while content holds information that appears on interaction.

Single Disclosure
Click the summary to reveal hidden content with smooth animation.
What is progressive disclosure?

Progressive disclosure is an interaction design pattern that sequences information and actions across several screens to reduce feelings of overwhelm. The idea is to show only essential information at first, providing additional details on demand.

Indicator Variants
Different visual indicators communicate expandability in various ways.
Chevron Indicator (Default)

The chevron rotates 90 degrees when expanded, providing a clear directional cue.

Plus/Minus Indicator

Plus transforms to minus when expanded. Common in FAQ patterns and form builders.

Arrow Down Indicator

Arrow rotates 180 degrees when expanded. Often used in dropdown-style disclosures.

No Indicator

No visual indicator. The summary text itself acts as the affordance. Useful when the interaction is implicit from context.

Default Open
Use the native open attribute to start expanded.
I start open by default

This disclosure starts in the open state. Click the summary to collapse it, then click again to re-expand with animation.

HTML Markup
The minimal markup needed for a single animated disclosure.
<details class="disclosure disclosure--indicator-chevron" data-animated>
  <summary class="disclosure__summary">
    <span class="disclosure__indicator" aria-hidden="true"></span>
    <span class="disclosure__label">Click to expand</span>
  </summary>
  <div class="disclosure__content">
    <div class="disclosure__content-inner">
      <p>Hidden content here</p>
    </div>
  </div>
</details>

<script src="@disclosures/core/dist/index.global.js"></script>
<script>Disclosures.autoInit();</script>