Collapsible

An interactive component which expands/collapses a panel.

Installation

Command to install the Collapsible component.

buridan add collapsible

uv run buridan add collapsible

python -m buridan add collapsible

Component Guide

Use the following to build the Collapsible component.

from components.ui.collapsible import collapsible

collapsible.root(
    collapsible.trigger(),
    collapsible.panel(),
)

Source Code & Dependencies

For manual installation, copy each of the source codes below in their respective locations.

components/core/core.py

components/ui/collapsible.py

Examples

Basic

Built on native <details>/<summary>, expand/collapse and keyboard support come from the browser, no JS required. The chevron rotation and open-state highlight use a structural selector ([details[open]>&]) rather than Tailwind's group-open:, since group-open: matches any open ancestor rather than the nearest one — harmless here, but matters once collapsibles nest (see below).

Props used: default_open on collapsible.root (starts the panel expanded).

How do I update my billing information?

You can update your card details directly inside your account settings dashboard under the billing tab.

import reflex as rx

from components.core.core import cn
from components.core.hugeicon import hi
from components.ui.button import button_variants
from components.ui.collapsible import collapsible


def collapsible_basic() -> rx.Component:
    return rx.el.div(
        collapsible.root(
            collapsible.trigger(
                rx.el.div(
                    rx.el.p("How do I update my billing information?"),
                    hi(
                        "ArrowDown01Icon",
                        class_name="size-4 ml-auto [details[open]>summary_&]:rotate-180",
                    ),
                    class_name="w-full flex flex-row items-center justify-between",
                ),
                class_name=cn(
                    "w-full py-3 text-left border-b border-input",
                    button_variants(variant="ghost"),
                ),
            ),
            collapsible.panel(
                rx.el.div(
                    "You can update your card details directly inside your account settings dashboard under the billing tab.",
                    class_name="py-3 text-sm text-muted-foreground leading-relaxed px-3",
                ),
            ),
            default_open=False,
        ),
        class_name="w-full max-w-sm",
    )

Nested

Collapsibles nest freely, each <details> is fully independent, so there's no coordination needed between levels (multiple folders can be open at once). The one thing that does need care when nesting: chevron/highlight styling must use the structural [details[open]>...] selector, not group-open:. group-open: would match an open ancestor several folders up, which makes every icon inside it look rotated even if that specific folder is still closed.

Props used: none beyond collapsible.root / collapsible.trigger / collapsible.panel — the tree is just folder_item calling itself recursively.

WORKSPACE EXPLORER

src

components

button.py

card.py

collapsible.py

navbar.py

sidebar.py

state

base_state.py

auth_state.py

main.py

public

favicon.ico

logo.svg

rxconfig.py

requirements.txt

import reflex as rx

from components.core.hugeicon import hi
from components.ui.collapsible import collapsible


def file_item(name: str, root_level: bool = False) -> rx.Component:
    padding_class = "pl-2" if root_level else "pl-9"

    return rx.el.div(
        hi("DocumentCodeIcon", class_name="size-4 text-muted-foreground/70 shrink-0"),
        rx.el.span(name, class_name="text-sm tracking-tight text-foreground/80"),
        class_name=f"flex items-center gap-2 {padding_class} py-1 hover:bg-muted/40 rounded-md cursor-pointer",
    )


def folder_item(name: str, *children: rx.Component) -> rx.Component:
    return collapsible.root(
        collapsible.trigger(
            hi("FolderIcon", class_name="size-4 text-muted-foreground shrink-0"),
            rx.el.span(name, class_name="text-sm font-medium truncate"),
            hi(
                "ArrowRight01Icon",
                class_name="size-3.5 ml-auto text-muted-foreground/70 [details[open]>summary_&]:rotate-90",
            ),
            class_name="w-full justify-start gap-2 h-8 px-2 rounded-md font-normal hover:bg-muted/60",
        ),
        collapsible.panel(
            rx.el.div(
                *children,
                class_name="pl-4 border-l border-border/60 ml-4 mt-0.5 flex flex-col gap-0.5",
            ),
        ),
        class_name="w-full",
    )


def collapsible_nested() -> rx.Component:
    return rx.el.div(
        rx.el.div(
            rx.el.span(
                "WORKSPACE EXPLORER",
                class_name="text-[10px] font-bold tracking-wider text-muted-foreground",
            ),
            class_name="px-2 pb-2 mb-1 border-b border-border/40",
        ),
        folder_item(
            "src",
            folder_item(
                "components",
                folder_item(
                    "ui",
                    file_item("button.py"),
                    file_item("card.py"),
                    file_item("collapsible.py"),
                ),
                file_item("navbar.py"),
                file_item("sidebar.py"),
            ),
            folder_item(
                "state",
                file_item("base_state.py"),
                file_item("auth_state.py"),
            ),
            file_item("main.py"),
        ),
        folder_item(
            "public",
            file_item("favicon.ico"),
            file_item("logo.svg"),
        ),
        file_item("rxconfig.py", root_level=True),
        file_item("requirements.txt", root_level=True),
        class_name="w-full max-w-xs p-3 bg-background border border-input rounded-xl shadow-xs select-none",
    )

API Reference

collapsible.root

Renders a native <details> element. default_open sets the initial open attribute on first render. Since it's a real <details>, controlled usage also works without any extra plumbing — pass open=State.is_open and on_toggle=State.handle_toggle to drive or react to it from Reflex state, same as any other native attribute/event.

collapsible.root(
    collapsible.trigger(...),
    collapsible.panel(...),
    default_open=False,
)

Prop	Type	Default
`default_open`	`bool`	`False`
`open`	`bool`	`None`
`on_toggle`	`EventHandler`	`None`
`class_name`	`str`	`""`

collapsible.trigger

Renders a <summary>. Unlike a typical accordion trigger, it doesn't append a chevron for you — pass your own icon (and any other trigger content) as children, and drive its rotation off the parent's open state yourself.

collapsible.trigger(
    rx.el.p("How do I update my billing information?"),
    hi("ArrowDown01Icon", class_name="[details[open]>summary_&]:rotate-180"),
)

Prop	Type	Default
`class_name`	`str`	`""`

collapsible.panel

collapsible.panel(
    "You can update your card details directly inside your account settings dashboard.",
)

Prop	Type	Default
`class_name`	`str`	`""`

Styling based on open state

collapsible.root renders the actual <details>, so any open-state styling on the trigger or its children should key off that element directly rather than a Tailwind group:

Target	Selector
The trigger itself (e.g. a highlight)	`[details[open]>&]:bg-muted/50`
Something inside the trigger (e.g. an icon)	`[details[open]>summary_&]:rotate-180`

Both are scoped to that collapsible's own <details> — never a distant open ancestor — which is what makes them safe to reuse inside recursively nested collapsibles like the file-tree example above.

External Tools

︲

On This Page