Search documentation v0.6.1

Collapsible

Collapse and expand sections of content

Source ↗️ Report Issue ↗️

Use the Collapsible component to manage large sets of content in a compact and organized way. Use for showing information partially, or hiding content entirely behind a toggle.

Preview

This component can be used with other components to create collapsible UI elements, such as cards, tables, timelines, and many more.

How to use Collapsibles in Astro
---
import { Button, Collapsible } from 'webcoreui/astro'
---
<Collapsible maxHeight="80px">
<p>...</p>
<Button slot="on">Show more</Button>
<Button slot="off">Show less</Button>
</Collapsible>
How to use Collapsibles in Svelte
<script>
import { Button, Collapsible } from 'webcoreui/svelte'
</script>
<Collapsible maxHeight="80px">
<p>...</p>
<Button slot="on">Show more</Button>
<Button slot="off">Show less</Button>
</Collapsible>
How to use Collapsibles in React
import React from 'react'
import { Button, Collapsible } from 'webcoreui/react'
const Component = () => (
<Collapsible
on={<Button>Show more</Button>}
off={<Button>Show less</Button>}
maxHeight="80px"
>
<p>...</p>
</Collapsible>
)
export default Component

To collapse other component or content, wrap it inside the Collapsible component. To create the toggle buttons, you can use the on and off slots in Astro and Svelte. For React components, use the on and off prop.

No Animation

By default, Collapsible components are not animated. To create toggleable content without animation, simply remove the maxHeight prop that enables the animation:

This component can be used with other components to create collapsible UI elements, such as cards, tables, timelines, and many more.

Toggle States

Toggle states can also be configured with the toggled and initialHeight props:

Toggled by default

This component can be used with other components to create collapsible UI elements, such as cards, tables, timelines, and many more.

Partially visible

This component can be used with other components to create collapsible UI elements, such as cards, tables, timelines, and many more.

<Collapsible toggled={true}>
...
</Collapsible>
<Collapsible initialHeight="50px">
...
</Collapsible>

You can also set the initialHeight and maxHeight properties globally via the following CSS variables if the heights of your component are constant:

html body {
--w-collapsible-initial-height: 0;
--w-collapsible-max-height: 100%;
}

Custom Layout

If you need to customize the layout of the Collapsible component, you can attach additional CSS using the className and togglesClassName props. For example, we can add the following CSS to display the button above the collapsible content:

This component can be used with other components to create collapsible UI elements, such as cards, tables, timelines, and many more.

<Collapsible className="reverse-collapsible">
...
</Collapsible>
<style>
/* Inside your CSS: */
.reverse-collapsible {
flex-direction: column-reverse;
}
</style>

API

type CollapsibleProps = {
initialHeight?: string
maxHeight?: string
toggled?: boolean
className?: string
togglesClassName?: string
}
type ReactCollapsibleProps = {
on: React.ReactNode
off: React.ReactNode
} & CollapsibleProps
PropPurpose
initialHeight Sets the initial height for the collapsible for the off state. Defaults to 0.
maxHeight Sets the max-height CSS property on the collapsible for the on state, making it animated.
toggled Sets whether the element is toggled by default. Defaults to false.
className Pass additional CSS classes for the collapsible.
togglesClassName Pass additional CSS classes for the container of the toggle buttons.
React PropPurpose
on Sets the element for the toggle on button.
off Sets the element for the toggle off button.

Request improvement for this page