Collapsible

Collapse and expand sections of content

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.

---
import { Button, Collapsible } from 'webcoreui/astro'
---

<Collapsible maxHeight="80px">
    <p>...</p>

    <Button slot="on">Show more</Button>
    <Button slot="off">Show less</Button>
</Collapsible>

<script>
    import { Button, Collapsible } from 'webcoreui/svelte'
</script>

<Collapsible maxHeight="80px">
    <p>...</p>

    {#snippet on()}
        <Button>Show more</Button>
    {/snippet}
    {#snippet off()}
        <Button>Show less</Button>
    {/snippet}
</Collapsible>

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:

Toggle States

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

• toggled: Makes the collapsible content toggled by default.
• initialHeight: Set the height of the visible content in the off state. Use to create partial visibility.

<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:

<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 SvelteCollapsibleProps = {
    on: Snippet
    off: Snippet
} & CollapsibleProps

type ReactCollapsibleProps = {
    on: React.ReactNode
    off: React.ReactNode
} & CollapsibleProps