Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Basic

A basic accordion that shows one item at a time. The first item is open by default.

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

<Accordion Type="AccordionType.Single" DefaultValue="item-1" Class="w-full">
    <AccordionItem Value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
            Yes. It adheres to the WAI-ARIA design pattern.
        </AccordionContent>
    </AccordionItem>
    <AccordionItem Value="item-2">
        <AccordionTrigger>Is it styled?</AccordionTrigger>
        <AccordionContent>
            Yes. It comes with default styles that match the other components.
        </AccordionContent>
    </AccordionItem>
    <AccordionItem Value="item-3">
        <AccordionTrigger>Is it animated?</AccordionTrigger>
        <AccordionContent>
            Yes. It's animated by default, but you can disable it if you prefer.
        </AccordionContent>
    </AccordionItem>
</Accordion>

Multiple

Use AccordionType.Multiple to allow multiple items to be open at the same time.

<Accordion Type="AccordionType.Multiple" Class="w-full">
    <AccordionItem Value="notifications">
        <AccordionTrigger>Notifications</AccordionTrigger>
        <AccordionContent>
            Manage how you receive notifications.
        </AccordionContent>
    </AccordionItem>
    <AccordionItem Value="privacy">
        <AccordionTrigger>Privacy Settings</AccordionTrigger>
        <AccordionContent>
            Control who can see your profile.
        </AccordionContent>
    </AccordionItem>
</Accordion>

Disabled

Use the Disabled parameter on AccordionItem to disable individual items.

This item is interactive and can be toggled. 

<Accordion Type="AccordionType.Single" DefaultValue="item-1" Class="w-full">
    <AccordionItem Value="item-1">
        <AccordionTrigger>Available item</AccordionTrigger>
        <AccordionContent>This item is interactive.</AccordionContent>
    </AccordionItem>
    <AccordionItem Value="item-2" Disabled="true">
        <AccordionTrigger>Disabled item</AccordionTrigger>
        <AccordionContent>This content cannot be revealed.</AccordionContent>
    </AccordionItem>
</Accordion>

FAQ Example

A common use case for accordions is a FAQ section.

<Accordion Type="AccordionType.Single" Collapsible="true" Class="w-full">
    <AccordionItem Value="faq-1">
        <AccordionTrigger>How do I reset my password?</AccordionTrigger>
        <AccordionContent>
            Click on 'Forgot Password' on the login page...
        </AccordionContent>
    </AccordionItem>
    <AccordionItem Value="faq-2">
        <AccordionTrigger>What payment methods do you accept?</AccordionTrigger>
        <AccordionContent>
            We accept all major credit cards...
        </AccordionContent>
    </AccordionItem>
</Accordion>