Accordion#

The simplest implementation is to use the HTML5 details and summary elements.

Applies the standard margin between the accordion items.

Adds the chevron "chevronleft", reacting to the open/close state of the item.

Sets the width to 100%. To unset this add the Tailwind utility class w-auto

It does not style the content, consider adding article-title or section-title according to your need.

@headlessui/react provides multiple components that can create the accordion pattern.

Use <Popover.Group /> with <Popover /> to create a list of accordion where only one item can be expanded at the same time. Alternatively, use <Disclosure /> to create a single accordion.

To animate the folding of the accordion panels, use the <Transition /> component and the transition-fold-y transition utility, headover for information on refining the animation.

@tinka/react rely on @reach/accordion to setup accessibility. Please follow their installation section to setup @reach/accordion.

<AnimatedAccordionPanel /> extends <AccordionPanel /> from @reach/accordion, it has CSS transition over the panel region.