reflex_copy/docs/library/chakra/disclosure/accordion.md

---

components:

- rx.chakra.Accordion
- rx.chakra.AccordionItem
- rx.chakra.AccordionButton
- rx.chakra.AccordionPanel
- rx.chakra.AccordionIcon

---

import reflex as rx

Accordion

Accordions allow you to hide and show content in a container under a header.

Accordion consist of an outer accordion component and inner accordion items. Each item has a optional button and panel. The button is used to toggle the panel's visibility.

rx.chakra.accordion(
    rx.chakra.accordion_item(
        rx.chakra.accordion_button(
            rx.chakra.heading("Example"),
            rx.chakra.accordion_icon(),
        ),
        rx.chakra.accordion_panel(
            rx.chakra.text("This is an example of an accordion component.")
        )
    ),
    allow_toggle = True,
    width = "100%"
)

An accordion can have multiple items.

rx.chakra.accordion(
    rx.chakra.accordion_item(
        rx.chakra.accordion_button(
            rx.chakra.heading("Example 1"),
            rx.chakra.accordion_icon(),
        ),
        rx.chakra.accordion_panel(
            rx.chakra.text("This is an example of an accordion component.")
        ),
    ),
    rx.chakra.accordion_item(
        rx.chakra.accordion_button(
            rx.chakra.heading("Example 2"),
            rx.chakra.accordion_icon(),
        ),
        rx.chakra.accordion_panel(
            rx.chakra.text("This is an example of an accordion component.")
        ),
    ),
    allow_multiple = True,
    bg="black",
    color="white",
    width = "100%"
)

You can create multilevel accordions by nesting accordions within the outer accordion panel.

rx.chakra.accordion(
    rx.chakra.accordion_item(
        rx.chakra.accordion_button(
            rx.chakra.accordion_icon(),
            rx.chakra.heading("Outer"),
            
        ),
        rx.chakra.accordion_panel(
            rx.chakra.accordion(
            rx.chakra.accordion_item(
                rx.chakra.accordion_button(
                    rx.chakra.accordion_icon(),
                    rx.chakra.heading("Inner"),    
                ),
                rx.chakra.accordion_panel(
                    rx.chakra.badge("Inner Panel", variant="solid", color_scheme="green"),
                )
            )
            ),
        )  
    ),
    width = "100%"
)

You can also create an accordion using the shorthand syntax. Pass a list of tuples to the items prop. Each tuple should contain a label and a panel.

rx.chakra.accordion(
   items=[("Label 1", rx.chakra.center("Panel 1")), ("Label 2", rx.chakra.center("Panel 2"))],
   width="100%"
)