# Collapsible Documentation Conceals or reveals content sections. This is a documentation section that potentially contains examples, demos, and other useful information related to a specific part of Bits UI. When helping users with this documentation, you can ignore the classnames applied to the demos unless they are relevant to the user's issue. Copy Page ```svelte

@huntabyte starred 3 repositories

@huntabyte/bits-ui

@huntabyte/shadcn-svelte

@svecosystem/runed

``` ## Overview The Collapsible component enables you to create expandable and collapsible content sections. It provides an efficient way to manage space and organize information in user interfaces, enabling users to show or hide content as needed. ## Key Features - **Accessibility**: ARIA attributes for screen reader compatibility and keyboard navigation. - **Transition Support**: CSS variables and data attributes for smooth transitions between states. - **Flexible State Management**: Supports controlled and uncontrolled state, take control if needed. - **Compound Component Structure**: Provides a set of sub-components that work together to create a fully-featured collapsible. - **Hidden Until Found**: Support for the `hidden="until-found"` attribute for browser search integration. ## Architecture The Collapsible component is composed of a few sub-components, each with a specific role: - **Root**: The parent container that manages the state and context for the collapsible functionality. - **Trigger**: The interactive element (e.g., button) that toggles the expanded/collapsed state of the content. - **Content**: The container for the content that will be shown or hidden based on the collapsible state. ## Structure Here's an overview of how the Collapsible component is structured in code: ```svelte ``` ## Reusable Components It's recommended to use the `Collapsible` primitives to create your own custom collapsible component that can be used throughout your application. MyCollapsible.svelte ```svelte {buttonText} {@render children?.()} ``` You can then use the `MyCollapsible` component in your application like so: +page.svelte ```svelte Here is my collapsible content. ``` ## Managing Open State This section covers how to manage the `open` state of the Collapsible. ### Two-Way Binding Use `bind:open` for simple, automatic state synchronization: ```svelte ``` ### Fully Controlled Use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) for complete control over the state's reads and writes. ```svelte ``` ## Svelte Transitions The Collapsible component can be enhanced with Svelte's built-in transition effects or other animation libraries. ### Using `forceMount` and `child` Snippets To apply Svelte transitions to Collapsible components, use the `forceMount` prop in combination with the `child` snippet. This approach gives you full control over the mounting behavior and animation of the `Collapsible.Content`. ```svelte Open {#snippet child({ props, open })} {#if open}

{/if} {/snippet} ``` In this example: - The `forceMount` prop ensures the content is always in the DOM. - The `child` snippet provides access to the open state and component props. - Svelte's `#if` block controls when the content is visible. - Transition directive (`transition:fade`) apply the animations. ### Best Practices For cleaner code and better maintainability, consider creating custom reusable components that encapsulate this transition logic. MyCollapsibleContent.svelte ```svelte {#snippet child({ props, open })} {#if open}

{@render children?.()}

{/if} {/snippet} ``` You can then use the `MyCollapsibleContent` component alongside the other `Collapsible` primitives throughout your application: ```svelte Open ``` ## Hidden Until Found The `hiddenUntilFound` prop enables integration with the browser's find-in-page functionality. When enabled, the collapsible content is marked with `hidden="until-found"`, which allows browsers to automatically expand collapsed content when users search for text within it. Expand Code ```svelte

Try searching for "searchable content" on this page (Ctrl+F / Cmd+F)

FAQ: How does search work?

This collapsible contains searchable content that demonstrates the hiddenUntilFound feature. When you search for text within this collapsed section, the browser will automatically expand it to show the matching results.

``` ### Basic Usage ```svelte Show More Details

This content will be automatically revealed when users search for text within it using Ctrl+F (Cmd+F on Mac).

For example, try searching for "automatically revealed" on this page.

``` ## API Reference ### Collapsible.Root The root collapsible container which manages the state of the collapsible. | Property | Type | Description | Details | | ---------------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | `open` $bindable | `boolean` | The open state of the collapsible. The content will be visible when this is true, and hidden when it's false.`Default: false` | | | `onOpenChange` | `function` - (open: boolean) => void | A callback function called when the open state changes.`Default: —— undefined` | | | `onOpenChangeComplete` | `function` - (open: boolean) => void | A callback function called after the open state changes and all animations have completed.`Default: —— undefined` | | | `disabled` | `boolean` | Whether or not the collapsible is disabled. This prevents the user from interacting with it.`Default: false` | | | `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: null` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | | `child` | `Snippet` - type SnippetProps = { props: Record\; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: —— undefined` | | | Data Attribute | Value | Description | Details | | ----------------------- | --------------------------- | ----------------------------------------- | ------- | | `data-state` | `enum` - 'open' \| 'closed' | The collapsible's open state. | | | `data-disabled` | `''` | Present when the collapsible is disabled. | | | `data-collapsible-root` | `''` | Present on the root element. | | ### Collapsible.Trigger The button responsible for toggling the collapsible's open state. | Property | Type | Description | Details | | --------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | `ref` $bindable | `HTMLButtonElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: null` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | | `child` | `Snippet` - type SnippetProps = { props: Record\; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: —— undefined` | | | Data Attribute | Value | Description | Details | | -------------------------- | --------------------------- | --------------------------------------------------------- | ------- | | `data-state` | `enum` - 'open' \| 'closed' | The collapsible's open state. | | | `data-disabled` | `''` | Present when the collapsible or this trigger is disabled. | | | `data-collapsible-trigger` | `''` | Present on the trigger element. | | ### Collapsible.Content The content displayed when the collapsible is open. | Property | Type | Description | Details | | ------------------ | ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | `forceMount` | `boolean` | Whether or not to forcefully mount the content. This is useful if you want to use Svelte transitions or another animation library for the content.`Default: false` | | | `hiddenUntilFound` | `boolean` | When true, the content will be marked with `hidden="until-found"` when collapsed, allowing browsers to find and automatically expand the content during page searches.`Default: false` | | | `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: null` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | | `child` | `Snippet` - type SnippetProps = { open: boolean; props: Record\; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: —— undefined` | | | Data Attribute | Value | Description | Details | | -------------------------- | --------------------------- | ----------------------------------------- | ------- | | `data-state` | `enum` - 'open' \| 'closed' | The collapsible's open state. | | | `data-disabled` | `''` | Present when the collapsible is disabled. | | | `data-collapsible-content` | `''` | Present on the content element. | | | CSS Variable | Description | Details | | ----------------------------------- | ---------------------------------------------- | ------- | | `--bits-collapsible-content-height` | The height of the collapsible content element. | | | `--bits-collapsible-content-width` | The width of the collapsible content element. | | [Previous Checkbox](/docs/components/checkbox) [Next Combobox](/docs/components/combobox)