RzAccordion

Default RzAccordion (Multiple Open)

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

<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.

<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>

Accessibility

RzAccordion follows an accordion disclosure pattern. The RzAccordion component groups one or more AccordionItem sections. Each item's AccordionTrigger is the interactive control that opens or closes the section, and AccordionContent contains the expandable content associated with that trigger.

Use AccordionType.Multiple when users may need to compare content across several open panels. Use AccordionType.Single when only one panel should remain open at a time.

Semantics

• AccordionTrigger renders as a native button inside a semantic heading for each AccordionItem.
• The trigger exposes its expanded or collapsed state with aria-expanded.
• The trigger is associated with its panel through aria-controls.
• The content panel renders with role="region" and references its trigger with aria-labelledby.
• Panels remain in normal document order after their triggers. Interactive controls inside open AccordionContent remain reachable with normal Tab navigation.
• The Alpine collapse animation does not change the trigger-to-panel semantic relationship.

Keyboard interaction

Focus management

• The Accordion does not trap focus.
• Focus remains on the trigger after the user expands or collapses a section.
• Tabbing into an open AccordionContent panel follows normal document order.
• Collapsed content is hidden with Alpine collapse behavior and should not expose its inner focusable controls to keyboard users while closed.
• In AccordionType.Single, opening one item may collapse another item, but focus remains on the trigger the user activated.

Screen-reader behavior

• Screen readers can announce each trigger's label and expanded or collapsed state from the native button and aria-expanded.
• After a trigger is expanded, the associated content becomes available in the document after that trigger.
• Interactive content inside AccordionContent, such as links and form controls, should provide its own accessible name and semantics.
• RzAccordion does not use live-region announcements for ordinary expand and collapse changes because the trigger state communicates the change without extra announcement noise.

Single vs multiple mode

In AccordionType.Multiple, several panels may be open at the same time, so keyboard and screen-reader users may move through content from multiple expanded panels. In AccordionType.Single, opening a new panel collapses the previously open panel. This reduces visible content, but authors should make it clear from surrounding copy or trigger labels that only one section remains open.

Authoring guidance

• Keep AccordionTrigger text concise and descriptive.
• Do not put complex interactive controls inside AccordionTrigger; place links, buttons, and form controls inside AccordionContent.
• Avoid using an Accordion for critical alerts, confirmations, or modal workflows.
• Avoid deeply nested accordions unless the content structure genuinely requires them.
• If content contains links or form controls, ensure those inner controls have accessible names.
• Do not rely only on color or icons to communicate expanded or collapsed state.

Accessible authoring example

This example uses descriptive trigger text and places the focusable link inside AccordionContent, not inside the trigger.

<RzAccordion Type="AccordionType.Multiple">
    <AccordionItem>
        <AccordionTrigger>Review account security settings</AccordionTrigger>
        <AccordionContent>
            <p>
                Check your authentication methods and recovery options before changing account access.
                <a href="/components/button" class="underline underline-offset-2 text-primary">Review button guidance</a> for action styling patterns.
            </p>
        </AccordionContent>
    </AccordionItem>
    <AccordionItem>
        <AccordionTrigger>Update notification preferences</AccordionTrigger>
        <AccordionContent>
            <p>
                Choose which updates should send email or in-app notifications. Keep labels specific for each preference control.
            </p>
        </AccordionContent>
    </AccordionItem>
</RzAccordion>

RzAccordion Component Parameters

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

AccordionItem Component Parameters

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

Alpine API

This page uses the rzAccordion parent Alpine x-data component and the accordionItem item-level Alpine component. The item runtime manages toggle state, keeps the existing single or multiple behavior, updates aria-expanded, and handles optional arrow-key focus movement.