Accordion

An accordion is a list of sections the reader can open: an FAQ, a settings group. Each item is a <details> element. The browser owns open state, so there’s nothing to mount.

Wrap them in <div class="k-accordion">. Each item is <details class="k-accordion__item">. The summary is .k-accordion__trigger. The open content is .k-accordion__panel. Put the same name on every details in the group if opening one should close the others. Skip name if several can stay open. open on a details starts that one expanded.

The chevron is a CSS ::after on the trigger. It flips when the item is open. The panel height eases open. Reduced motion drops the motion.

Classes

Class	Type	Description
k-accordion	component	Wrapper around the group of items.
k-accordion__item	part	One section. Goes on a details element.
k-accordion__trigger	part	The summary row. Carries the chevron that flips when open.
k-accordion__panel	part	Content revealed while the item is open. Its height eases.

Examples

Several can stay open

No name. Each item opens and closes on its own. The first starts open.

What is the kit?

CSS chrome plus a small JS behavior layer.

Does it need a framework?

No. Write HTML.

<div class="k-accordion">
<details class="k-accordion__item" open>
  <summary class="k-accordion__trigger">What is the kit?</summary>
  <div class="k-accordion__panel">CSS chrome plus a small JS behavior layer.</div>
</details>
<details class="k-accordion__item">
  <summary class="k-accordion__trigger">Does it need a framework?</summary>
  <div class="k-accordion__panel">No. Write HTML.</div>
</details>
</div>

Exclusive group

Same name on both items. Opening the second closes the first. The first starts open.

What is the kit?

CSS chrome plus a small JS behavior layer.

Does it need a framework?

No. Write HTML.

<div class="k-accordion">
<details class="k-accordion__item" name="faq" open>
  <summary class="k-accordion__trigger">What is the kit?</summary>
  <div class="k-accordion__panel">CSS chrome plus a small JS behavior layer.</div>
</details>
<details class="k-accordion__item" name="faq">
  <summary class="k-accordion__trigger">Does it need a framework?</summary>
  <div class="k-accordion__panel">No. Write HTML.</div>
</details>
</div>

Accessibility

Each item is a native <details> / <summary>. The browser exposes open state and keyboard (Enter / Space on the summary). Don’t replace the summary with a div. The chevron is CSS on the trigger, so it isn’t in the accessibility tree. Give each trigger a clear name. The panel is whatever comes after.

Dos and don’ts

Do

• Use <details> and <summary>. The browser already did this job.
• Share one name when only one item should be open.
• Put the answer in .k-accordion__panel.

Don’t

• Import JS for this. There’s nothing to mount.
• Replace the summary with a styled div.
• Hide something the reader has to see inside a closed item.