Collapse

Expandable/collapsible content sections

Basic

Also see accordion examples

Basic Collapse

Preview Code Auto

Focus me to see content

tabindex="0" attribute is necessary to make the div focusable

Div(
    Div('Focus me to see content', cls='collapse-title text-xl font-medium'),
    Div(
        P('tabindex="0" attribute is necessary to make the div focusable'),
        cls='collapse-content'
    ),
    tabindex='0',
    cls='collapse bg-base-200'
)

Checkbox Collapse

Preview Code Auto

Click me to show/hide content

hello

Div(
    Input(type='checkbox'),
    Div('Click me to show/hide content', cls='collapse-title text-xl font-medium'),
    Div(
        P('hello'),
        cls='collapse-content'
    ),
    cls='collapse bg-base-200'
)

Details Collapse

Preview Code Auto

Click to open/close

content

Details(
    Summary('Click to open/close', cls='collapse-title text-xl font-medium'),
    Div(
        P('content'),
        cls='collapse-content'
    ),
    cls='collapse bg-base-200'
)

Using <details> tag, we can't have animations because <details> tag doesn't allow CSS transitions.

Styling

Bordered Style

Preview Code Auto

Focus me to see content

tabindex="0" attribute is necessary to make the div focusable

Div(
    Div('Focus me to see content', cls='collapse-title text-xl font-medium'),
    Div(
        P('tabindex="0" attribute is necessary to make the div focusable'),
        cls='collapse-content'
    ),
    tabindex='0',
    cls='collapse border-base-300 bg-base-200 border'
)

Arrow Collapse

Preview Code Auto

Focus me to see content

tabindex="0" attribute is necessary to make the div focusable

Div(
    Div('Focus me to see content', cls='collapse-title text-xl font-medium'),
    Div(
        P('tabindex="0" attribute is necessary to make the div focusable'),
        cls='collapse-content'
    ),
    tabindex='0',
    cls='collapse collapse-arrow border-base-300 bg-base-200 border'
)

Plus/Minus Collapse

Preview Code Auto

Focus me to see content

tabindex="0" attribute is necessary to make the div focusable

Div(
    Div('Focus me to see content', cls='collapse-title text-xl font-medium'),
    Div(
        P('tabindex="0" attribute is necessary to make the div focusable'),
        cls='collapse-content'
    ),
    tabindex='0',
    cls='collapse collapse-plus border-base-300 bg-base-200 border'
)

States

Force Open

Preview Code Auto

I have collapse-open class

tabindex="0" attribute is necessary to make the div focusable

Div(
    Div('I have collapse-open class', cls='collapse-title text-xl font-medium'),
    Div(
        P('tabindex="0" attribute is necessary to make the div focusable'),
        cls='collapse-content'
    ),
    tabindex='0',
    cls='collapse collapse-open border-base-300 bg-base-200 border'
)

Force Closed

Preview Code Auto

I have collapse-close class

tabindex="0" attribute is necessary to make the div focusable

Div(
    Div('I have collapse-close class', cls='collapse-title text-xl font-medium'),
    Div(
        P('tabindex="0" attribute is necessary to make the div focusable'),
        cls='collapse-content'
    ),
    tabindex='0',
    cls='collapse collapse-close border-base-300 bg-base-200 border'
)

Custom Colors

Focus Colors

Preview Code Auto

Focus me to see content

tabindex="0" attribute is necessary to make the div focusable

Div(
    Div('Focus me to see content', cls='collapse-title'),
    Div(
        P('tabindex="0" attribute is necessary to make the div focusable'),
        cls='collapse-content'
    ),
    tabindex='0',
    cls='bg-primary text-primary-content focus:bg-secondary focus:text-secondary-content collapse'
)

Checkbox Colors

Preview Code Auto

Click me to show/hide content

hello

Div(
    Input(type='checkbox', cls='peer'),
    Div(
        'Click me to show/hide content',
        cls='collapse-title peer-checked:bg-secondary peer-checked:text-secondary-content'
    ),
    Div(
        P('hello'),
        cls='collapse-content peer-checked:bg-secondary peer-checked:text-secondary-content'
    ),
    cls='collapse bg-primary text-primary-content'
)

Class Reference

Class	Type	Description
collapse	Component	Base collapse container
collapse-title	Part	Title part
collapse-content	Part	Content part
collapse-arrow	Modifier	Adds arrow icon
collapse-plus	Modifier	Adds plus/minus icon
collapse-open	Modifier	Force open state
collapse-close	Modier	Force closed state

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo