Components · accordions

Accordions. Native details, smooth open.

Built on <details>/<summary>. Multi-open by default, single-open variant works like radio. CSS height transition with JS measurement fallback.

01 · base

.lsd-accordion

Each item is a native <details>. JS adds smooth height transitions via CSS grid grid-template-rows trick (no layout-thrashing measurements needed).

base

Multi-open (default)

Each item opens independently.

What is LSD?

This is the body content for What is LSD?. It expands smoothly when you open the summary.

Why design as physics?

This is the body content for Why design as physics?. It expands smoothly when you open the summary.

Where does Aurora fit?

This is the body content for Where does Aurora fit?. It expands smoothly when you open the summary.

<details class="lsd-accordion__item">
  <summary class="lsd-accordion__summary">...

02 · variants

Four variants

.lsd-accordion--single-open

Single-open (radio)

Opening one closes the others.

Plan A

This is the body content for Plan A. It expands smoothly when you open the summary.

Plan B

This is the body content for Plan B. It expands smoothly when you open the summary.

Plan C

This is the body content for Plan C. It expands smoothly when you open the summary.

.lsd-accordion--single-open

.lsd-accordion--multi-open

Multi-open (default)

Default behaviour — every item independent.

Item A

This is the body content for Item A. It expands smoothly when you open the summary.

Item B

This is the body content for Item B. It expands smoothly when you open the summary.

Item C

This is the body content for Item C. It expands smoothly when you open the summary.

.lsd-accordion--multi-open

.lsd-accordion--card-style

Card style

Each item gets shadow + padding bump.

FAQ 1

This is the body content for FAQ 1. It expands smoothly when you open the summary.

FAQ 2

This is the body content for FAQ 2. It expands smoothly when you open the summary.

FAQ 3

This is the body content for FAQ 3. It expands smoothly when you open the summary.

.lsd-accordion--card-style

.lsd-accordion--inline-icon

Inline icon (chevron rotates)

Bigger chevron with rotation on open.

Specs

This is the body content for Specs. It expands smoothly when you open the summary.

Pricing

This is the body content for Pricing. It expands smoothly when you open the summary.

Support

This is the body content for Support. It expands smoothly when you open the summary.

.lsd-accordion--inline-icon

03 · animations

Open / close height

CSS grid-template-rows trick: 0fr → 1fr animates the cell height without measuring. Chevron rotates via transform: rotate(90deg). Reduced-motion users get instant toggling.

transition

Smooth height — no JS measure

Pure CSS via grid rows. Falls back gracefully.

Click to open me

This is the body content for Click to open me. It expands smoothly when you open the summary.

grid-template-rows: 0fr → 1fr

Components · LSD primitives

↩ Framework index