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>Shape
Use the shape prop to change the corners: default (rounded), hard (square) or squircle (a rounded square with smooth corners). Browsers without corner-shape support show normal rounded corners for squircle.
Default
Collapsible content.
Hard
Collapsible content.
Squircle
Collapsible content.
<details class="zui-collapsible">
<summary class="zui-collapsible-trigger">Default</summary>
<div class="zui-collapsible-content">
<p>Collapsible content.</p>
</div>
</details>
<details class="zui-collapsible zui-collapsible-shape-hard">
<summary class="zui-collapsible-trigger">Hard</summary>
<div class="zui-collapsible-content">
<p>Collapsible content.</p>
</div>
</details>
<details class="zui-collapsible zui-collapsible-shape-squircle">
<summary class="zui-collapsible-trigger">Squircle</summary>
<div class="zui-collapsible-content">
<p>Collapsible content.</p>
</div>
</details>import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@mrmartineau/zui/react'
<Collapsible>
<CollapsibleTrigger>Default</CollapsibleTrigger>
<CollapsibleContent>
<p>Collapsible content.</p>
</CollapsibleContent>
</Collapsible>
<Collapsible shape="hard">
<CollapsibleTrigger>Hard</CollapsibleTrigger>
<CollapsibleContent>
<p>Collapsible content.</p>
</CollapsibleContent>
</Collapsible>
<Collapsible shape="squircle">
<CollapsibleTrigger>Squircle</CollapsibleTrigger>
<CollapsibleContent>
<p>Collapsible content.</p>
</CollapsibleContent>
</Collapsible>---
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@mrmartineau/zui/astro'
---
<Collapsible>
<CollapsibleTrigger>Default</CollapsibleTrigger>
<CollapsibleContent>
<p>Collapsible content.</p>
</CollapsibleContent>
</Collapsible>
<Collapsible shape="hard">
<CollapsibleTrigger>Hard</CollapsibleTrigger>
<CollapsibleContent>
<p>Collapsible content.</p>
</CollapsibleContent>
</Collapsible>
<Collapsible shape="squircle">
<CollapsibleTrigger>Squircle</CollapsibleTrigger>
<CollapsibleContent>
<p>Collapsible content.</p>
</CollapsibleContent>
</Collapsible>import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@mrmartineau/zui/solid'
<Collapsible>
<CollapsibleTrigger>Default</CollapsibleTrigger>
<CollapsibleContent>
<p>Collapsible content.</p>
</CollapsibleContent>
</Collapsible>
<Collapsible shape="hard">
<CollapsibleTrigger>Hard</CollapsibleTrigger>
<CollapsibleContent>
<p>Collapsible content.</p>
</CollapsibleContent>
</Collapsible>
<Collapsible shape="squircle">
<CollapsibleTrigger>Squircle</CollapsibleTrigger>
<CollapsibleContent>
<p>Collapsible content.</p>
</CollapsibleContent>
</Collapsible><script lang="ts">
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@mrmartineau/zui/svelte'
</script>
<Collapsible>
<CollapsibleTrigger>Default</CollapsibleTrigger>
<CollapsibleContent>
<p>Collapsible content.</p>
</CollapsibleContent>
</Collapsible>
<Collapsible shape="hard">
<CollapsibleTrigger>Hard</CollapsibleTrigger>
<CollapsibleContent>
<p>Collapsible content.</p>
</CollapsibleContent>
</Collapsible>
<Collapsible shape="squircle">
<CollapsibleTrigger>Squircle</CollapsibleTrigger>
<CollapsibleContent>
<p>Collapsible content.</p>
</CollapsibleContent>
</Collapsible><template>
<Collapsible>
<CollapsibleTrigger>Default</CollapsibleTrigger>
<CollapsibleContent>
<p>Collapsible content.</p>
</CollapsibleContent>
</Collapsible>
<Collapsible shape="hard">
<CollapsibleTrigger>Hard</CollapsibleTrigger>
<CollapsibleContent>
<p>Collapsible content.</p>
</CollapsibleContent>
</Collapsible>
<Collapsible shape="squircle">
<CollapsibleTrigger>Squircle</CollapsibleTrigger>
<CollapsibleContent>
<p>Collapsible content.</p>
</CollapsibleContent>
</Collapsible>
</template>
<script setup>
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@mrmartineau/zui/vue'
</script>To make squircle the default everywhere, add zui-squircle-all to <html> — see Squircle.
CSS custom properties
Set these on :root, on a wrapper, or on the element. See Component 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-xs) |
Horizontal padding of the trigger and content |
--zui-collapsible-padding-y |
var(--space-2xs) |
Vertical padding of the trigger and content |
--zui-collapsible-trigger-font-size |
var(--step-0) |
Trigger font size |
--zui-collapsible-content-font-size |
var(--step-0) |
Content font size |