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 |