Collapse

The Collapse component allows you to show and hide content independently. It is unstyled by default, giving you the flexibility to use any content and design according to your needs.

Example

Ensure you have the Collapse component available. Below is a simple example demonstrating how to use the Chips component. This example shows how to create a chip with a basic text label:

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

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

The title snippet {#snippet title()} defines the trigger for the collapse. In this case, a button labeled "Flush Collapse Title" acts as the clickable element to toggle the collapse.

Any component outside the title snippet will be considered as the content of the collapse and will be revealed or hidden based on the collapse state.

Configuration