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:

Svelte 
<script>
  import { Collapse } from "theui-svelte";
</script>

<Collapse ariaLabel="COLLAPSE">
  {#snippet trigger()}
    <Button>Flush collapse trigger</Button>
  {/snippet}
  <p> ..... </p>
</Collapse>

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.

Nam pretium turpis et arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam adipiscing. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Curabitur suscipit suscipit tellus.

Svelte 
<script>
  let open = $state(true);
</script>

<Button onclick={() => open = !open}>Toggle from outside</Button>

<Collapse bind:isOpen={open}>
  {#snippet trigger()}
    <Button>Collapse trigger</Button>
  {/snippet}
  <p> ..... </p>
</Collapse>

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.

Svelte 
<Collapse animationSpeed="slower"> ... </Collapse>
<Collapse animationSpeed="none"> ... </Collapse>

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