FAQ Item Collapsible for React

The h3 wraps CollapsibleTrigger, so the question is a heading in the page outline and the trigger inside it is still the button. Pick the heading level that fits your page.

Yes, it turns 45 degrees into a cross. The trigger has the group class and sets aria-expanded while open, so group-aria-expanded:rotate-45 on PlusIcon turns it, eased by transition-transform duration-200.

items-start keeps the plus level with the first line when the question wraps, gap-4 keeps it clear of the text, and text-start lines the question up with the start edge instead of centering it.

Each item has border-b pb-4, so stacking them draws a line under each answer. Give the list a gap-4 or a top margin on each item for space above the next question.

Set defaultOpen on Collapsible.

It starts closed.

Each Collapsible opens on its own. When several sit in one list and only one should be open at a time, with arrow keys between the headers, use an Accordion.