Collapsible
A single disclosure widget using the native details/summary elements.
Usage
What is ZUI?
ZUI is a CSS-first UI library with optional React, Astro, Solid, Svelte, and Vue component wrappers.
<details class="zui-collapsible">
<summary class="zui-collapsible-trigger">What is ZUI?</summary>
<div class="zui-collapsible-content">
<p>ZUI is a CSS-first UI library with optional React, Astro, Solid, Svelte, and Vue component wrappers.</p>
</div>
</details>import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@mrmartineau/zui/react'
<Collapsible>
<CollapsibleTrigger>What is ZUI?</CollapsibleTrigger>
<CollapsibleContent>
<p>ZUI is a CSS-first UI library with optional React, Astro, Solid, Svelte, and Vue component wrappers.</p>
</CollapsibleContent>
</Collapsible>---
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@mrmartineau/zui/astro'
---
<Collapsible>
<CollapsibleTrigger>What is ZUI?</CollapsibleTrigger>
<CollapsibleContent>
<p>ZUI is a CSS-first UI library with optional React, Astro, Solid, Svelte, and Vue component wrappers.</p>
</CollapsibleContent>
</Collapsible>import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@mrmartineau/zui/solid'
<Collapsible>
<CollapsibleTrigger>What is ZUI?</CollapsibleTrigger>
<CollapsibleContent>
<p>ZUI is a CSS-first UI library with optional React, Astro, Solid, Svelte, and Vue component wrappers.</p>
</CollapsibleContent>
</Collapsible><script lang="ts">
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@mrmartineau/zui/svelte'
</script>
<Collapsible>
<CollapsibleTrigger>What is ZUI?</CollapsibleTrigger>
<CollapsibleContent>
<p>ZUI is a CSS-first UI library with optional React, Astro, Solid, Svelte, and Vue component wrappers.</p>
</CollapsibleContent>
</Collapsible><template>
<Collapsible>
<CollapsibleTrigger>What is ZUI?</CollapsibleTrigger>
<CollapsibleContent>
<p>ZUI is a CSS-first UI library with optional React, Astro, Solid, Svelte, and Vue component wrappers.</p>
</CollapsibleContent>
</Collapsible>
</template>
<script setup>
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@mrmartineau/zui/vue'
</script>Open by default
Add the open attribute to show the content on load.
Already open
This collapsible starts in the open state.
<details class="zui-collapsible" open>
<summary class="zui-collapsible-trigger">Already open</summary>
<div class="zui-collapsible-content">
<p>This collapsible starts in the open state.</p>
</div>
</details>import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@mrmartineau/zui/react'
<Collapsible open>
<CollapsibleTrigger>Already open</CollapsibleTrigger>
<CollapsibleContent>
<p>This collapsible starts in the open state.</p>
</CollapsibleContent>
</Collapsible>---
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@mrmartineau/zui/astro'
---
<Collapsible open>
<CollapsibleTrigger>Already open</CollapsibleTrigger>
<CollapsibleContent>
<p>This collapsible starts in the open state.</p>
</CollapsibleContent>
</Collapsible>import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@mrmartineau/zui/solid'
<Collapsible open>
<CollapsibleTrigger>Already open</CollapsibleTrigger>
<CollapsibleContent>
<p>This collapsible starts in the open state.</p>
</CollapsibleContent>
</Collapsible><script lang="ts">
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@mrmartineau/zui/svelte'
</script>
<Collapsible open>
<CollapsibleTrigger>Already open</CollapsibleTrigger>
<CollapsibleContent>
<p>This collapsible starts in the open state.</p>
</CollapsibleContent>
</Collapsible><template>
<Collapsible open>
<CollapsibleTrigger>Already open</CollapsibleTrigger>
<CollapsibleContent>
<p>This collapsible starts in the open state.</p>
</CollapsibleContent>
</Collapsible>
</template>
<script setup>
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@mrmartineau/zui/vue'
</script>CSS custom properties
| Property | Default | Description |
|---|---|---|
--zui-collapsible-border | var(--color-border) | Border colour |
--zui-collapsible-radius | var(--radius-md) | Border radius |
--zui-collapsible-bg | var(--color-surface) | Background colour |
--zui-collapsible-padding-x | var(--space-sm) | Horizontal padding |
--zui-collapsible-padding-y | var(--space-sm) | Vertical padding |