Library
/
Chakra
/
Disclosure
/
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%",
)The wrapper that uses cloneElement to pass props to AccordionItem children.
Event Triggers
See the full list of default event triggersThe button that toggles the expand/collapse state of the accordion item. This button must be wrapped in an element with role heading.
Props
No component specific props
Event Triggers
See the full list of default event triggersThe container for the details to be revealed.
Props
No component specific props
Event Triggers
See the full list of default event triggersA chevron-down icon that rotates based on the expanded/collapsed state.
Props
No component specific props
Event Triggers
See the full list of default event triggersDid you find this useful?
