/

On this page

Collapsible

The .collapse function creates an interactive collapsible block that users can toggle by clicking.

The function requires an inline title, which is always displayed, and block content, which appears when expanded.

Example 1

.collapse {A _collapsible_ block. **Click me!**}
    You found this hidden content.

    **Surprise!**
A collapsible block. Click me!

You found this hidden content.

Surprise!

You can change the initial state of the block using the optional open Boolean argument, which defaults to false (collapsed).

Example 2

.collapse {A _collapsible_ block. **Click me!**} open:{yes}
    Not so hidden content anymore!
A collapsible block. Click me!

Not so hidden content anymore!