> For the complete documentation index, see [llms.txt](https://docs.webstudio.is/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webstudio.is/university/radix/collapsible.md). # Collapsible An interactive component which expands/collapses a panel. ## Features * Full keyboard navigation. * Adheres to the [Disclosure WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/). ## How to use the Radix UI Collapsible The Collapsible Component is in the "Components Panel" under the "Radix" section. Click on it or drag it onto the canvas. The Collapsible will populate a template that's easy to adjust for your needs.
Components panel with the Radix Collapsible component and its parts

Radix UI Collapsible component within Webstudio

The Collapsible component consists of three main parts: 1. **Collapsible**: The root component that controls the collapsible behavior. 2. **Collapsible Trigger**: The button that toggles the collapsible. 3. **Collapsible Content**: The component that contains the collapsible content. ## Customizing the Collapsible To customize the Collapsible component: 1. **Collapsible Trigger**: Modify the trigger element to change what users click to expand/collapse the content. This can be text, an icon, or any combination of elements. 2. **Collapsible Content**: Edit the content section to add whatever elements you want to show/hide when the collapsible is toggled. 3. **Styling**: Any of the three components can be styled to match your design requirements. ## Keep closed content in the HTML Select **Collapsible Content** and enable **Force Mount** to keep its content in the HTML while the Collapsible is closed. New Collapsible components enable this setting by default. Disable it to remove closed content from the HTML. When **Force Mount** is enabled, add a closed-state CSS rule such as `height: 0` for `[data-state="closed"]`. Animation-only examples can leave the content visible because they assume Radix unmounts closed content. Radix temporarily sets inline `transition-duration: 0s` and `animation-name: none` while it measures content height. This can suppress the first open animation, so test both the first open and later open/close cycles. ## Using Collapsible for UI Patterns The Collapsible component is useful for various UI patterns: * FAQ sections * "Show more" content sections * Settings or preferences panels * Mobile navigation menus * Detail views that can be expanded/collapsed ## Related * [Accordion](/university/radix/accordion.md) – Multiple collapsible sections in a group * [Tabs](/university/radix/tabs.md) – Organize content into switchable panels * [Dialog](/university/radix/dialog.md) – Modal window for focused content * [Sheet](/university/radix/sheet.md) – Sliding panel from screen edge --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.webstudio.is/university/radix/collapsible.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.