--- title: "Collapsible" description: "A button that expands and collapses a panel: more details, extra settings, or a whole file tree." url: "https://susonwaiba.github.io/htmx-ui/docs/components/collapsible" section: "Components" --- # Collapsible A button that expands and collapses a panel: more details, extra settings, or a whole file tree. ```html

Order #4189

Status Shipped
``` ## Markup - Wrap everything in `.collapsible` with `data-collapsible`. - The trigger is a ` ``` ## File tree Collapsibles nest: each trigger only opens its own panel. Here every folder is one, with a chevron-right turned by `[--collapsible-rotate:90deg]` on the tree and the folder icon swapped while open. ```html ``` ## Without JavaScript The same classes style a native `
`: the `` is the trigger and the icon turns while it's open, with no behaviour at all. The trade-off is that the summary must come first, so the trigger can't sit below the panel. ```html
What does it cost?

Nothing: htmx-ui is MIT licensed.

``` ## Find in page Closed content is invisible to the browser's find-in-page. Close it with `hidden="until-found"` instead of `hidden`, and searching for text inside opens the collapsible; it closes back to `until-found`. Browsers without support treat it as plain `hidden`. ## With htmx Every open and close fires a bubbling `collapsible:toggle` with `detail.open`, and the wrapper carries `data-open` while open. To fetch the panel's content the first time it opens, put the request on the trigger: ```html
``` ## Reference | Class / attribute | Description | | --- | --- | | `.collapsible` | Wrapper (a flex column). Add data-collapsible, or use it on a
. | | `.collapsible-trigger` | A full-width row button, or a . Optional: any button works. | | `.collapsible-icon` | Turns by --collapsible-rotate (180deg) while open. | | `.collapsible-content` | The panel. Add data-collapsible-content, and hidden to start closed. | | `[data-collapsible-trigger]` | Toggles the panel; aria-expanded and aria-controls kept in sync. | | `[data-open]` | On the wrapper while open. | | `collapsible:toggle` | Event on the wrapper with detail { open }. |