Accordion

Group of collapse elements, with single or multiple expanded at once.


MDN: <details>
MDN: <summary>

What is PaleUI?
A minimal, unstyled component library built on semantic HTML with CSS custom properties.
Do I need a framework?
No. PaleUI is framework-agnostic and works with plain HTML or any framework that renders it.
How do I customize styles?
Override CSS custom properties such as --border or --radius-sm, or target the data attributes directly.
<div data-header>
  <div data-accordion>
    <details role="region" open>
      <summary>
        What is PaleUI?
      </summary>
      <div>
        A minimal, unstyled component library built on semantic HTML with CSS custom properties.
      </div>
    </details>
    <details role="region">
      <summary>
        Do I need a framework?
      </summary>
      <div>
        No. PaleUI is framework-agnostic and works with plain HTML or any framework that renders it.
      </div>
    </details>
    <details role="region">
      <summary>
        How do I customize styles?
      </summary>
      <div>
        Override CSS custom properties such as
        <code>
          --border
        </code>
        or
        <code>
          --radius-sm
        </code>
        , or target the data attributes directly.
      </div>
    </details>
  </div>
</div>

Note that support for having one <details> element open at a time (done with the name attribute) is newer than the <details> element itself, and not as widely supported.

Accordion items use role="region" for proper semantics and to distinguish them from dropdown menus (which also use <details> elements). This ensures accordions take full width while dropdown menus remain compact.

Usage

Wrapper element grouping one or more accordion items. Add data-accordion to a <div> to create the container.

Each accordion item is a <details role="region"> element. The role="region" attribute is required for proper accordion styling and semantics.

Add a shared name attribute across items to limit one open at a time.

summary — Clickable trigger element.

div — Collapsible content area.

<div data-accordion>
  <details role="region" name="group">
    <summary>
      <!-- title -->
    </summary>
    <div>
      <!-- content -->
    </div>
  </details>
  <details role="region" name="group">
    <summary>
      <!-- title -->
    </summary>
    <div>
      <!-- content -->
    </div>
  </details>
</div>

Examples

Mode

By default, all items can be opened at once. The single mode adds a shared name attribute so only one item can be open at a time — replace group with a unique value per accordion instance.

What is PaleUI?
A minimal, unstyled component library built on semantic HTML with CSS custom properties.
Do I need a framework?
No. PaleUI is framework-agnostic and works with plain HTML or any framework that renders it.
How do I customize styles?
Override CSS custom properties such as --border or --radius-sm, or target the data attributes directly.
What is PaleUI?
A minimal, unstyled component library built on semantic HTML with CSS custom properties.
Do I need a framework?
No. PaleUI is framework-agnostic and works with plain HTML or any framework that renders it.
How do I customize styles?
Override CSS custom properties such as --border or --radius-sm, or target the data attributes directly.
<div data-example="mode" data-variant="multi">
  <div data-accordion>
    <details role="region" open>
      <summary>
        What is PaleUI?
      </summary>
      <div>
        A minimal, unstyled component library built on semantic HTML with CSS custom properties.
      </div>
    </details>
    <details role="region">
      <summary>
        Do I need a framework?
      </summary>
      <div>
        No. PaleUI is framework-agnostic and works with plain HTML or any framework that renders it.
      </div>
    </details>
    <details role="region">
      <summary>
        How do I customize styles?
      </summary>
      <div>
        Override CSS custom properties such as
        <code>
          --border
        </code>
        or
        <code>
          --radius-sm
        </code>
        , or target the data attributes directly.
      </div>
    </details>
  </div>
</div>
<div data-example="mode" data-variant="single">
  <div data-accordion>
    <details role="region" name="faq" open>
      <summary>
        What is PaleUI?
      </summary>
      <div>
        A minimal, unstyled component library built on semantic HTML with CSS custom properties.
      </div>
    </details>
    <details role="region" name="faq">
      <summary>
        Do I need a framework?
      </summary>
      <div>
        No. PaleUI is framework-agnostic and works with plain HTML or any framework that renders it.
      </div>
    </details>
    <details role="region" name="faq">
      <summary>
        How do I customize styles?
      </summary>
      <div>
        Override CSS custom properties such as
        <code>
          --border
        </code>
        or
        <code>
          --radius-sm
        </code>
        , or target the data attributes directly.
      </div>
    </details>
  </div>
</div>

States

Similar to all components, the accordion and its parts can be in certain states.

Open
This item is currently expanded and showing its content.
Default
This item is collapsed.
Disabled
This item cannot be toggled.
Default
This item is collapsed.
<div data-example="states" data-variant="open">
  <div data-accordion>
    <details role="region" open>
      <summary>
        Open
      </summary>
      <div>
        This item is currently expanded and showing its content.
      </div>
    </details>
    <details role="region">
      <summary>
        Default
      </summary>
      <div>
        This item is collapsed.
      </div>
    </details>
  </div>
</div>
<div data-example="states" data-variant="disabled">
  <div data-accordion>
    <details role="region" aria-disabled="true">
      <summary>
        Disabled
      </summary>
      <div>
        This item cannot be toggled.
      </div>
    </details>
    <details role="region">
      <summary>
        Default
      </summary>
      <div>
        This item is collapsed.
      </div>
    </details>
  </div>
</div>