Accordion

wu-accordion groups <details> elements in a bordered box. Each item opens and closes with its <summary>, with no JavaScript.

How to make an accordion without JavaScript

Use one <details> element for each section. The <summary> is the clickable title, and everything after it folds away until it is clicked. Give every section the same name and only one stays open at a time. The browser’s built-in details element does the work, so no script is needed. The full demo is under Exclusive.

<div class="wu-accordion">
  <details class="wu-accordion-item" name="faq">
    <summary class="wu-accordion-trigger">Question one?</summary>
    <div class="wu-accordion-body">Answer one.</div>
  </details>
  <details class="wu-accordion-item" name="faq">
    <summary class="wu-accordion-trigger">Question two?</summary>
    <div class="wu-accordion-body">Answer two.</div>
  </details>
</div>

Class or attribute	Effect
`wu-accordion`	Root. Bordered surface box
`wu-accordion-item`	Part, on `<details>`. One section, with a line between sections
`wu-accordion-trigger`	Part, on `<summary>`. Row with a chevron: down when closed, up when open
`wu-accordion-body`	Part. Section content in regular text, so settings and answers read at full contrast
`name` on every item	The same name makes the group exclusive: one item open at a time
`open` on an item	Opens it at load
`animated`	The chevron turns and the panel height glides, opt-in

Exclusive

The same name on each <details> keeps one item open at a time.

Can I change my plan later?

Yes. The new price applies from the next billing period.

Do you offer refunds?

Unused days are refunded when you cancel within 48 hours.

Where is my data stored?

In the region you pick when you create the workspace.

<div class="wu-accordion">
  <details class="wu-accordion-item" name="accordion-faq" open>
    <summary class="wu-accordion-trigger">Can I change my plan later?</summary>
    <div class="wu-accordion-body">Yes. The new price applies from the next billing period.</div>
  </details>
  <details class="wu-accordion-item" name="accordion-faq">
    <summary class="wu-accordion-trigger">Do you offer refunds?</summary>
    <div class="wu-accordion-body">Unused days are refunded when you cancel within 48 hours.</div>
  </details>
  <details class="wu-accordion-item" name="accordion-faq">
    <summary class="wu-accordion-trigger">Where is my data stored?</summary>
    <div class="wu-accordion-body">In the region you pick when you create the workspace.</div>
  </details>
</div>

Independent

Leave out name to let several items stay open.

Shipping

Orders ship within two business days.

Returns

Return any item within 30 days.

<div class="wu-accordion">
  <details class="wu-accordion-item">
    <summary class="wu-accordion-trigger">Shipping</summary>
    <div class="wu-accordion-body">Orders ship within two business days.</div>
  </details>
  <details class="wu-accordion-item">
    <summary class="wu-accordion-trigger">Returns</summary>
    <div class="wu-accordion-body">Return any item within 30 days.</div>
  </details>
</div>

Right to left

The chevron sits at the inline end of each trigger, so it moves to the left in right-to-left text.

عنوان الفوترة

يُستخدم في كل فاتورة.

الرقم الضريبي

يظهر أسفل العنوان.

<div class="wu-accordion">
  <details class="wu-accordion-item" open>
    <summary class="wu-accordion-trigger">عنوان الفوترة</summary>
    <div class="wu-accordion-body">يُستخدم في كل فاتورة.</div>
  </details>
  <details class="wu-accordion-item">
    <summary class="wu-accordion-trigger">الرقم الضريبي</summary>
    <div class="wu-accordion-body">يظهر أسفل العنوان.</div>
  </details>
</div>

Animation

The animated word turns the chevron and lets the panel height glide open and closed. wu-animated on an ancestor turns the same motion on for every accordion inside it. Motion runs only under prefers-reduced-motion: no-preference.

What is included?

Every component, its source and the prebuilt CSS.

Does it need JavaScript?

No. The accordion is built on details and summary.

<div class="wu-accordion animated">
  <details class="wu-accordion-item" name="accordion-animated">
    <summary class="wu-accordion-trigger">What is included?</summary>
    <div class="wu-accordion-body">Every component, its source and the prebuilt CSS.</div>
  </details>
  <details class="wu-accordion-item" name="accordion-animated">
    <summary class="wu-accordion-trigger">Does it need JavaScript?</summary>
    <div class="wu-accordion-body">No. The accordion is built on details and summary.</div>
  </details>
</div>

Accessibility

<summary> is a native button: Enter and Space open and close the item, and screen readers announce its expanded state.
Keyboard focus draws an inset ring, so the bordered group does not clip it.

Load only the accordion

@use "@wovenui/components/accordion";

The accordion needs no other component.