A collapsible is a row that opens and closes to show more content, used for FAQ lists and filters. The header can carry a descriptive text, icons, a toggle switch and a number badge. The content animates open.
How to add a collapsible to a page. The files are components/css/collapsible.css and components/js/collapsible.js.
Link the shared stylesheet and the script once per page. Never copy the rules into a page.
| Step | What to do |
|---|---|
| 1. Link | <link rel="stylesheet" href="/components/css/collapsible.css"> and <script src="/components/js/collapsible.js"></script>. A switch needs switch.css, a number badge.css. |
| 2. Row | A .collapsible-wrap with a <button class="collapsible-item"> and a content element that follows it directly. |
| 3. State | Set aria-expanded and aria-controls (the content’s id) on the button. The script updates aria-expanded. |
| 4. List | Stack several rows in one wrapper. They share the line between them. |
| 5. Size, background and theme | Add collapsible-wrap--small, --boxed, --filled (a surface-raised-secondary header background) or --dark to the row. |
| 6. Open | Add collapsible-wrap--open and set max-height on the content to start open. |
Copy the markup you need.
The markup has no motion. The open and close animation is set in Motion on Examples & Guidelines.
| Class | Use |
|---|---|
collapsible-wrap | One row with the line under it. |
--open, --small, --boxed, --filled, --divider-top, --divider-bottom, --no-divider-bottom, --dark, --disabled | Modifiers on the row. |
collapsible-item | The header. |
__left, __text, __line, __label, __info, __helper, __end, __chevron | The parts of the header. |
collapsible-item__content, __body | The content. Animated with max-height. |
__list, __row, __count, __support, __note, __more | Content patterns. |
| Function | Use |
|---|---|
toggleCollapsible(header) | Toggles the open class on the header’s parent, updates aria-expanded and sets max-height on the next sibling. It does nothing for a disabled row or for a click on a switch or a link in the header. |
| Variable | Use |
|---|---|
--co-ease | The easing of the open and close animation. Default var(--ease-standard). |
--co-duration | The duration. Default var(--duration-fast-4). |
--co-content-gap | The space from the header text to the content text. Default 24px, the same for every size. |
collapsible-wrap--divider-bottom to keep it, for a section with one collapsible.collapsible-wrap--boxed (Large) or collapsible-wrap--small collapsible-wrap--boxed (Small).div, not a button. Prefer a row with a switch and no chevron.The component is one CSS file and one script, shared by every page. Link them, never copy them. The code below is read from the files the page links, so it is always what you see.