# Collapse
The Collapse component shows and hides a block of content. It comes unstyled, so the trigger and the body are yours to design.
## Example
Ensure you have the `Collapse` component available. Below is a simple example demonstrating how to use the Collapse component. This example shows how to toggle content using a button as the trigger:
```html
{#snippet trigger()}
{/snippet}
.....
```
The `trigger` snippet `{"{" + "#snippet trigger()" + "}"}` defines the trigger for the collapse. In this case, a button labeled "Flush Collapse Trigger" acts as the clickable element to toggle the collapse.
Any component outside the trigger snippet will be considered as the content of the collapse and will be revealed or hidden based on the collapse state.
## Open State
The `isOpen` prop controls whether the collapse is open. It is `false` by default, so set it to `true` to open the collapse on page load. The prop is bindable: use `bind:isOpen` to read the current state or to open and close the collapse from outside the component.
```html
{#snippet trigger()}
{/snippet}
.....
```
## Animation Speed
The `animationSpeed` prop controls how fast the collapse opens and closes. Available values are `"none"`, `"slower"`, `"slow"`, `"normal"`, `"fast"` (default), and `"faster"`. Set it to `"none"` to show and hide the content without animation.
```html
... ...
```
## Accessibility
The `Collapse` component is fully accessible and keyboard-friendly. The toggle element uses `role="button"` and is focusable with `tabindex="0"`, allowing users to control it using the Enter or Space keys, and to close it using the Escape key. It includes `aria-expanded`, `aria-controls`, and `aria-labelledby` to communicate state and relationships clearly to assistive technologies. The content area is hidden from screen readers when collapsed using `aria-hidden`. You can also use the `ariaLabel` prop to provide a custom accessible label for better context.
## Configuration
### Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `trigger` | Snippet | `undefined` | The header or trigger content for the collapse. |
| `animationSpeed` | [ANIMATE_SPEED](https://www.theui.dev/docs/types#animation-speed-type) | `fast` | Controls the speed of the collapse animation. |
| `ariaLabel` | string | - | Accessible label for the collapse component. |
| `isOpen` | boolean | `false` | Defines if the collapse is open. Bindable: use bind:isOpen to read or control the open state from outside. |
### Snippets
| Name | Description |
| --- | --- |
| `trigger` | The trigger content for the collapse. |
---
Category: Components
Keywords: collapse, toggle, content, animation, component, svelte, svelte-5, theui-svelte, component-library, ui, tailwindcss
Full documentation set: https://www.theui.dev/llms-full.txt