Accordion

Accordions allow you to organize a stack of items that can be expanded or collapsed, revealing or hiding additional content. Accordion examples use the Alpine JS's collapse plugin, which provides a smooth collapse/expand animation. If you prefer not to use this plugin, you can remove the "x-collapse" directive from each item, but you will lose this animation.

Default Accordion (Multiple Open)

In this example, AllowMultipleOpen is set to true, so more than one section can be expanded at once.

Source

<Accordion AllowMultipleOpen="true">
    <AccordionSection Title="What browsers are supported?">
        <p>
            Our website is optimized for the latest versions of Chrome, Firefox, Safari, and Edge.
            Check our <a href="#" class="underline underline-offset-2 text-primary ">documentation</a> for more info.
        </p>
    </AccordionSection>
    <AccordionSection Title="How can I contact customer support?">
        <p>
            Reach out to our support team via email at 
            <a href="#" class="underline underline-offset-2 text-primary ">support@example.com</a>
            or call 1-800-123-4567.
        </p>
    </AccordionSection>
    <AccordionSection Title="What is the refund policy?">
        <p>
            Please refer to our <a href="#" class="underline underline-offset-2 text-primary ">refund policy page</a> for details.
        </p>
    </AccordionSection>
</Accordion>

Single Open Accordion

In this example, AllowMultipleOpen is set to false, ensuring that only one section is open at a time.

Source

<Accordion AllowMultipleOpen="false">
    <AccordionSection Title="What browsers are supported?">
        <p>
            Our website is optimized for the latest versions of Chrome, Firefox, Safari, and Edge.
            Check our <a href="#" class="underline underline-offset-2 text-primary ">documentation</a> for more info.
        </p>
    </AccordionSection>
    <AccordionSection Title="How can I contact customer support?">
        <p>
            Reach out to our support team via email at 
            <a href="#" class="underline underline-offset-2 text-primary ">support@example.com</a>
            or call 1-800-123-4567.
        </p>
    </AccordionSection>
    <AccordionSection Title="What is the refund policy?">
        <p>
            Please refer to our <a href="#" class="underline underline-offset-2 text-primary ">refund policy page</a> for details.
        </p>
    </AccordionSection>
</Accordion>

Accordion Component Parameters

The following table summarizes the key parameters for the Accordion component.

Property	Description
AllowMultipleOpen	Boolean – Determines whether multiple accordion sections can be expanded simultaneously. When set to `true`, more than one section may be open; when `false`, only one section is open at a time.
ChildContent	RenderFragment – The content of the Accordion, typically consisting of one or more `AccordionSection` components.