RzAccordion

RzAccordions allow you to organize a stack of items that can be expanded or collapsed, revealing or hiding additional content. RzAccordion 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 RzAccordion (Multiple Open)

In this example, Type is set to AccordionType.Multiple, so more than one section can be expanded at once.

Source

<RzAccordion Type="AccordionType.Multiple">
    <AccordionItem>
        <AccordionTrigger>What browsers are supported?</AccordionTrigger>
        <AccordionContent>
            <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>
        </AccordionContent>
    </AccordionItem>
    <AccordionItem>
        <AccordionTrigger>How can I contact customer support?</AccordionTrigger>
        <AccordionContent>
            <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>
        </AccordionContent>
    </AccordionItem>
    <AccordionItem>
        <AccordionTrigger>What is the refund policy?</AccordionTrigger>
        <AccordionContent>
            <p>
                Please refer to our <a href="#" class="underline underline-offset-2 text-primary ">refund policy page</a> for details.
            </p>
        </AccordionContent>
    </AccordionItem>
</RzAccordion>

Single Open RzAccordion

In this example, Type is set to AccordionType.Single, ensuring that only one section is open at a time.

Source

<RzAccordion Type="AccordionType.Single">
    <AccordionItem>
        <AccordionTrigger>What browsers are supported?</AccordionTrigger>
        <AccordionContent>
            <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>
        </AccordionContent>
    </AccordionItem>
    <AccordionItem>
        <AccordionTrigger>How can I contact customer support?</AccordionTrigger>
        <AccordionContent>
            <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>
        </AccordionContent>
    </AccordionItem>
    <AccordionItem>
        <AccordionTrigger>What is the refund policy?</AccordionTrigger>
        <AccordionContent>
            <p>
                Please refer to our <a href="#" class="underline underline-offset-2 text-primary ">refund policy page</a> for details.
            </p>
        </AccordionContent>
    </AccordionItem>
</RzAccordion>

RzAccordion Component Parameters

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

Property	Description
Type	`AccordionType` enum – Determines how accordion sections behave when opened. `AccordionType.Multiple`: Allows multiple sections to be expanded simultaneously. `AccordionType.Single`: Ensures only one section is open at a time; opening a new section closes any previously open one.
ChildContent	RenderFragment – The content of the RzAccordion, typically consisting of one or more `AccordionItem` components, each containing `AccordionTrigger` and `AccordionContent` components.

AccordionItem Component Parameters

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

Property	Description
Title	String – The title displayed in the clickable header of the accordion section. This is used as a fallback when `AccordionTrigger` is not defined.
Collapsed	Boolean – Determines if the section is initially collapsed (`true`) or expanded (`false`). Defaults to `true`.
AccordionTrigger	RenderFragment – The content for the clickable header part of the accordion item. When provided, this takes precedence over the `Title` property.
AccordionContent	RenderFragment – The content to be displayed inside the section when it is expanded.