Skip to main content
The Collapsible component creates an expandable/collapsible section that smoothly animates between open and closed states. Perfect for FAQs, details sections, and progressive disclosure.

​
Basic Usage

import reflex_ui as ui

ui.collapsible(
    trigger=ui.button("Toggle Details"),
    content="This content can be expanded and collapsed."
)

​
Component Structure

For more control, use the component parts: 
ui.collapsible.root(
    ui.collapsible.trigger(
        render_=ui.button(
            "Show More",
            ui.icon("ChevronDownIcon"),
        )
    ),
    ui.collapsible.panel(
        rx.text("This is the collapsible content."),
        rx.text("It can contain multiple elements.")
    ),
    default_open=False
)

​
Controlled State

class State(rx.State):
    is_open: bool = False

    def toggle(self):
        self.is_open = not self.is_open

ui.collapsible.root(
    ui.collapsible.trigger(
        render_=ui.button("Toggle")
    ),
    ui.collapsible.panel(
        "Collapsible content here"
    ),
    open=State.is_open,
    on_open_change=State.toggle
)

​
With Custom Trigger

ui.collapsible.root(
    ui.collapsible.trigger(
        render_=rx.box(
            "Click to expand",
            padding="1rem",
            cursor="pointer",
            _hover={"background": "gray.100"}
        )
    ),
    ui.collapsible.panel(
        rx.box(
            "Hidden content that slides down smoothly",
            padding="1rem"
        )
    )
)

​
FAQ Pattern

rx.vstack(
    ui.collapsible(
        trigger=ui.button("What is Reflex?"),
        content="Reflex is a framework for building web apps in Python."
    ),
    ui.collapsible(
        trigger=ui.button("How do I install it?"),
        content="Run: pip install reflex"
    ),
    ui.collapsible(
        trigger=ui.button("Is it free?"),
        content="Yes, Reflex is open source and free to use."
    ),
    spacing="0.5rem",
    width="100%"
)

​
Props Reference

​
Root Props

​
open
bool
Whether the collapsible panel is currently open (controlled)
​
default_open
bool
default:"False"
Whether the collapsible panel is initially open (uncontrolled)
​
on_open_change
EventHandler
Event handler called when the panel is opened or closed
​
disabled
bool
default:"False"
Whether the component should ignore user interaction

​
High-Level Props

​
trigger
Component
The component that toggles the collapsible panel
​
content
str | Component
The content to display in the collapsible panel

​
Panel Props

​
keep_mounted
bool
default:"False"
Whether to keep the element in the DOM while the panel is hidden. Ignored when hidden_until_found is used.
​
hidden_until_found
bool
default:"False"
Allows browser’s built-in page search to find and expand the panel contents. Uses hidden="until-found" to hide the element without removing it from the DOM.

​
Styling

From source code at reflex_ui/components/base/collapsible.py:11-16:
  • Root: flex flex-col justify-center text-secondary-12
  • Trigger: group flex items-center gap-2
  • Panel: Smooth height transitions with overflow hidden, animates from 0 to full height

​
Implementation Details

From source code at reflex_ui/components/base/collapsible.py:30-96:
  • High-level API automatically creates root, trigger, and panel components
  • Smooth CSS transitions for height changes
  • Supports both controlled and uncontrolled state
  • Uses CSS custom property --collapsible-panel-height for animations
  • Accessible keyboard navigation

Build docs developers (and LLMs) love

Get started for freeTalk to us