Accordion

CSS-only collapsible panels using native <details> / <summary> elements. Part of the @thenewcss/accordion addon package.

No JavaScript required. Uses the HTML name attribute for exclusive mode (one panel open at a time) in modern browsers.

Installation

npm install @thenewcss/accordion

Basic Accordion

Wrap <details> elements with .accordion-item inside an .accordion container. Use the name attribute for exclusive mode.

Preview

Accordion Item #1

This is the content for the first accordion panel. It can contain any HTML content.

Accordion Item #2

This is the content for the second accordion panel. Only one panel is open at a time when using the same name attribute.

Accordion Item #3

This is the content for the third accordion panel.

<div class="accordion">
  <details class="accordion-item" name="faq">
    <summary class="accordion-header">Accordion Item #1</summary>
    <div class="accordion-body">
      Content for the first panel.
    </div>
  </details>
  <details class="accordion-item" name="faq">
    <summary class="accordion-header">Accordion Item #2</summary>
    <div class="accordion-body">
      Content for the second panel.
    </div>
  </details>
</div>

Always Open

Omit the name attribute to allow multiple panels to be open simultaneously. Add open to start a panel expanded.

Preview

First Item (open by default)

This panel starts open.

Second Item

Click to expand independently.

<div class="accordion">
  <details class="accordion-item" open>
    <summary class="accordion-header">First Item (open by default)</summary>
    <div class="accordion-body">This panel starts open.</div>
  </details>
  <details class="accordion-item">
    <summary class="accordion-header">Second Item</summary>
    <div class="accordion-body">Click to expand independently.</div>
  </details>
</div>

Flush

Add .accordion-flush to remove outer borders and rounded corners.

Preview

Flush Item #1

Content without outer borders.

Flush Item #2

Clean edge-to-edge appearance.

Flush Item #3

Great for embedding in cards.

<div class="accordion accordion-flush">
  <details class="accordion-item" name="flush-faq">
    <summary class="accordion-header">Flush Item #1</summary>
    <div class="accordion-body">Content without outer borders.</div>
  </details>
</div>

Class Reference

Class	Description
`.accordion`	Container for accordion items.
`.accordion-item`	Applied to details element. Has border-bottom and border-radius on first/last child.
`.accordion-header`	Applied to summary element. Styled heading with custom chevron indicator that rotates on open.
`.accordion-body`	Content panel with padding.
`.accordion-flush`	Modifier that removes outer borders and border-radius.