Accordion shows and hides headed sections of content. It is native details and summary with a drawn chevron, one root hook, three part hooks, and a boxed variant, with no JavaScript.
One root hook, an item on each <details>, a trigger on its <summary>, and a content wrapper.
<div data-bitsy-accordion>
<details data-bitsy-accordion-item name="faq" open>
<summary data-bitsy-accordion-trigger><h3>Can I change plans later?</h3></summary>
<div data-bitsy-accordion-content>
<p>Yes. Changes apply at the start of the next billing period.</p>
</div>
</details>
</div>name across items so opening one closes the others. Omit it to allow many open.open to the item that starts open.data-bitsy-variant="boxed" on the root draws each item as a panel.The chevron direction shows the state, so open and closed never rely on color alone.
Yes. Changes apply at the start of the next billing period.
Within 30 days of purchase, for any reason.
Cards, bank transfer, and invoices for annual plans.
Add the stylesheet to your page.
Set the hooks you want to change on the root.
Extra settings for people who need them.
A plain <details> gets the foundation panel look, with a boxed frame and a small chevron at the start. data-bitsy-accordion adds the dividers or panels, the chevron, hover feedback, and the height animation where the browser supports it. Toggling, keyboard, and find-in-page are native, so the Bit ships no JavaScript.