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	Default
`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.	`AccordionType`	`AccordionType.Multiple`
`ChildContent`	RenderFragment – The content of the RzAccordion, typically consisting of one or more `AccordionItem` components, each containing `AccordionTrigger` and `AccordionContent` components.	`RenderFragment`	`null`

AccordionItem Component Parameters

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

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

Alpine API

This page uses the rzAccordion Alpine x-data component.

Method	Parameters	Description
`None`	`—`	No public methods are documented; behavior is driven by markup and state attributes.