# Collapsible

## 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.

<figure><img src="/files/VgOlW5OIwFEjxTb7USkC" alt="" width="308"><figcaption><p>Radix UI Collapsible component within Webstudio</p></figcaption></figure>

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.

## 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: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webstudio.is/university/radix/collapsible.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.