basecoat/docs/src/components/accordion.md

templateEngineOverride, layout, title, description, toc

templateEngineOverride	layout	title	description	toc
njk	layouts/page.njk	Accordion	A vertically stacked set of interactive headings that each reveal a section of content.	label id Usage usage

{% from "macros/code_preview.njk" import code_preview %}

{% lucide "circle-alert" %}

There is no dedicated Accordion component in Basecoat.

{% set code %}

Is it accessible? {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}

Yes. It adheres to the WAI-ARIA design pattern.

Is it styled? {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}

Yes. It comes with default styles that matches the other components' aesthetic.

Is it animated? {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}

Yes. It's animated by default, but you can disable it if you prefer.

<script> (() => { const accordions = document.querySelectorAll('.accordion'); accordions.forEach(accordion => { accordion.addEventListener('click', (event) => { const summary = event.target.closest('summary'); if (!summary) return; const details = summary.closest('details'); if (!details) return; accordion.querySelectorAll('details').forEach(detailsEl => { if (detailsEl !== details) { detailsEl.removeAttribute('open'); } }); }); }); })(); </script> {% endset %} {{ code_preview("accordion", code | prettyHtml, "w-full max-w-md") }}

Usage

Basecoat already animates <details> elements by default. The example add some Tailwind CSS utility classes for style and a bit of vanilla JavaScript to handle the open/close state.