MenuCaderno UI
npmGitHub
Theme

<cad-accordion> + <cad-accordion-item>

Accordion

Expand or collapse sections of content. Allow several sections open, or keep only one open at a time.

Single-open review questions

Why use a Map?

Use a Map when you need to look up values by key repeatedly.

When is the simple loop better?

When you only need to search a small collection once.

What belongs in the explanation?

Describe the inputs, expected output, and why you chose this approach.

API reference: <cad-accordion>

labellabelstring''modemodeCadAccordionMode'multiple'labelstringlabelnomodeCadAccordionModemodeyes(default)`cad-accordion-item` elements.baseAccordion container.

API reference: <cad-accordion-item>

animationanimationCadAccordionAnimation'collapse'disableddisabledbooleanfalseheadingheadingstring''openopenbooleanfalsetonetoneCadAccordionTone'blue'animationCadAccordionAnimationanimationyesdisabledbooleandisabledyesheadingstringheadingnoopenbooleanopenyestoneCadAccordionTonetoneyescad-accordion-toggleCustomEventFires after the native disclosure state changes.(default)Disclosure content.titleSummary label. Falls back to the `heading` attribute.baseNative details element.contentDisclosure content.markerHand-drawn disclosure marker.summaryNative summary element.titleSummary label.

Behavior

cad-accordion-toggle reports { open } when an item opens or closes. Set animation="none" to disable animation; reduced-motion preferences also disable it. Disabled items keep their content but remove the summary from the tab order.

MIT licensed. Built with Caderno UI.Report an issue
Back to top