Quill docs

Accordion

An accordion: a stack of disclosure sections, each a heading > button (aria-expanded / aria-controls) over a labelled region panel. By default one section is open at a time; .multiple() allows several. A rotating chevron reflects the open state.

Live demo#

Click a section header (or focus it and press Enter/Space) to expand it; opening one collapses the others. The first section starts open. With JavaScript off, the open section shows and the rest are valid collapsed regions.

A server-rendered region that hydrates in place on first interaction — never a client re-render.

Theme it#

Flip the component axes for this preview alone — the controls re-point scoped design tokens on the demo stage and the component itself restyles. Variant controls swap the component class, surface controls change the visual treatment, and motion controls change the interaction feel without leaking to the page.

A server-rendered region that hydrates in place on first interaction — never a client re-render.

Density

Radius

Surface

Motion

// This demo is scoped: these axes apply only to this preview.
el("div")
    .attr("data-q-size", "cozy")
    .attr("data-q-radius", "rounded")
    .attr("data-q-surface", "flat")
    .attr("data-q-motion", "smooth")
    .child(
        Accordion::new("faq", /* sections */).open(0).island("faq-island")
    )

Code#

Construct the component with its builder:

Accordion::new(
    "faq",
    vec![
        Section::new("What is an island?", panel("A server-rendered region …")),
        Section::new("Does it work without JavaScript?", panel("Yes. …")),
        Section::new("How is it kept accessible?", panel("The WAI-ARIA APG accordion pattern …")),
    ],
)
.open(0)
.island("faq-island")