# Collapsible A container that can be expanded or collapsed to show or hide content. ```svelte

Design System

``` ## Controlled Control the active state of the component. ```svelte (open = details.open)}> The world dies over and over again, but the skeleton always gets up and walks. Every heart has its own skeletons. The bones of the skeleton which support the body can become the bars of the cage which imprison the spirit. Show {open ? 'Less' : 'More'} ``` ## Indicator Add a visual indicator to the toggle button. ```svelte The world dies over and over again, but the skeleton always gets up and walks. Every heart has its own skeletons. The bones of the skeleton which support the body can become the bars of the cage which imprison the spirit. Toggle ``` ## Disabled Set the disabled state for the component. ```svelte Hidden! Toggle ``` ## Alignment Control the position and alignment of the trigger and content using flexbox `items-*`. ```svelte Toggle The world dies over and over again, but the skeleton always gets up and walks. Every heart has its own skeletons. The bones of the skeleton which support the body can become the bars of the cage which imprison the spirit. ``` ## Direction Set the text direction (`ltr` or `rtl`) using the `dir` prop. ```svelte The world dies over and over again, but the skeleton always gets up and walks. Every heart has its own skeletons. The bones of the skeleton which support the body can become the bars of the cage which imprison the spirit. Toggle ``` ## Anatomy Here's an overview of how the Collapsible component is structured in code: ```svelte ``` ## API Reference