Collapsible - Semi Design Next

When to use

Collapsibleis a behavior component with animation effect by default. It is used in various components in Semi Components, including: Navigation, Collapse, Tree, TreeSelect, and Typography.
When the above components do not meet requirements or customized collapsed behavior, you can use Collapsible to put in contents that need to be expanded or folded.

Demos

How to import

import { Collapsible } from '@fibrous/semi-ui-react';

Basic Usage

Use isOpen to control the expansion or folding of the content.

Code

import { useState } from 'react';
import { Collapsible, Button } from '@fibrous/semi-ui-react';

export default function CollapsibleDemo() {
    const [isOpen, setOpen] = useState(false);
    const toggle = () => {
        setOpen(!isOpen);
    };
    const collapsed = (
        <ul>
            <li>
                <p>Semi Design 以内容优先进行设计。</p>
            </li>
            <li>
                <p>更容易地自定义主题。</p>
            </li>
            <li>
                <p>适用国际化场景。</p>
            </li>
            <li>
                <p>效率场景加入人性化关怀。</p>
            </li>
        </ul>
    );
    return (
        <div>
            <Button onClick={toggle} aria-expanded={isOpen} aria-controls="collapsible-basic">
                Toggle
            </Button>
            <Collapsible isOpen={isOpen} id="collapsible-basic">
                {collapsed}
            </Collapsible>
        </div>
    );
}

Custom Animation Duration

You can use duration to set animation duration or turn off animation by setting motion to false.

设置动画时间：

Code

import { useState } from 'react';
import { Collapsible, InputNumber, Button } from '@fibrous/semi-ui-react';

export default function CollapsibleDemo() {
    const [isOpen, setOpen] = useState(false);
    const [duration, setDuration] = useState(250);
    const toggle = () => {
        setOpen(!isOpen);
    };
    const collapsed = (
        <ul>
            <li>
                <p>Semi Design 以内容优先进行设计。</p>
            </li>
            <li>
                <p>更容易地自定义主题。</p>
            </li>
            <li>
                <p>适用国际化场景。</p>
            </li>
            <li>
                <p>效率场景加入人性化关怀。</p>
            </li>
        </ul>
    );
    return (
        <div>
            <span id="collapsible-duration-label">设置动画时间：</span>
            <InputNumber aria-labelledby="collapsible-duration-label" min={0} defaultValue={250} style={{ width: 120 }} onChange={(val) => setDuration(Number(val))} step={10} />
            <br />
            <Button onClick={toggle} aria-expanded={isOpen} aria-controls="collapsible-duration">
                Toggle
            </Button>
            <Collapsible isOpen={isOpen} duration={duration} id="collapsible-duration">
                {collapsed}
            </Collapsible>
        </div>
    );
}

Nested use

Code

import { useState } from 'react';
import { Collapsible, Button } from '@fibrous/semi-ui-react';

export default function CollapsibleDemo() {
    const [isOpen, setOpen] = useState(false);
    const [isChildOpen, setChildOpen] = useState(false);

    const collapsed = (
        <ul>
            <li>
                <p>Semi Design 以内容优先进行设计。</p>
            </li>
            <li>
                <p>更容易地自定义主题。</p>
            </li>
            <li>
                <p>适用国际化场景。</p>
            </li>
            <li>
                <p>效率场景加入人性化关怀。</p>
            </li>
        </ul>
    );
    return (
        <div>
            <Button onClick={() => setOpen(!isOpen)} aria-expanded={isOpen} aria-controls="collapsible-nested">
                Toggle
            </Button>
            <br />
            <Collapsible isOpen={isOpen} id="collapsible-nested">
                <div>
                    <span>Semi Design的设计原则包括：</span>
                    <Button onClick={() => setChildOpen(!isChildOpen)} aria-expanded={isChildOpen} aria-controls="collapsible-nested-list">
                        Toggle List
                    </Button>
                </div>
                <Collapsible isOpen={isChildOpen} id="collapsible-nested-list">
                    {collapsed}
                </Collapsible>
            </Collapsible>
        </div>
    );
}

Custom CollapseHeight

You could use collapseHeight to customize collapsed height.

Semi Design 以内容优先进行设计。
更容易地自定义主题。
适用国际化场景。
效率场景加入人性化关怀。

Code

import { useState, type CSSProperties } from 'react';
import { Collapsible, Button } from '@fibrous/semi-ui-react';

export default function CollapsibleDemo() {
    const [isOpen, setOpen] = useState(false);
    const maskStyle = isOpen
        ? {}
        : {
              WebkitMaskImage: 'linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0.2) 80%, transparent 100%)',
          };
    const collapsed = (
        <ul>
            <li>
                <p>Semi Design 以内容优先进行设计。</p>
            </li>
            <li>
                <p>更容易地自定义主题。</p>
            </li>
            <li>
                <p>适用国际化场景。</p>
            </li>
            <li>
                <p>效率场景加入人性化关怀。</p>
            </li>
        </ul>
    );
    const toggle = () => {
        setOpen(!isOpen);
    };
    const linkStyle: CSSProperties = {
        position: 'absolute',
        left: 0,
        right: 0,
        width: '100%',
        padding: 0,
        border: 'none',
        background: 'none',
        fontSize: 'inherit',
        fontFamily: 'inherit',
        lineHeight: 'inherit',
        textAlign: 'center',
        bottom: -10,
        fontWeight: 700,
        cursor: 'pointer',
        color: 'var(--semi-color-link)',
    };
    return (
        <>
            <Button onClick={toggle} aria-expanded={isOpen} aria-controls="collapsible-height">
                Toggle
            </Button>
            <div style={{ position: 'relative' }}>
                <Collapsible isOpen={isOpen} collapseHeight={60} style={{ ...maskStyle }} id="collapsible-height">
                    {collapsed}
                </Collapsible>
                {!isOpen && (
                    <button type="button" onClick={toggle} aria-expanded={isOpen} aria-controls="collapsible-height" style={{ ...linkStyle }}>
                        + Show More
                    </button>
                )}
            </div>
        </>
    );
}

API reference

Props

Property	Description	Type	Default
children	Content to expand or collapse.	`React.ReactNode`	-
className	Class name of the outer wrapper.	`string`	-
collapseHeight	Height in pixels when collapsed. When greater than 0, part of the content stays visible.	`number`	`0`
collapseHeightAdaptive	Whether the collapsed height follows the content when it is shorter than `collapseHeight`, that is `Math.min(content height, collapseHeight)`.	`boolean`	`false`
duration	Animation duration in milliseconds.	`number`	`250`
fade	Whether to fade in and out.	`boolean`	`false`
id	Id of the inner content element, for the trigger's `aria-controls`.	`string`	-
isOpen	Whether the content area is expanded.	`boolean`	`false`
keepDOM	Whether to keep the DOM tree of the hidden content; it is destroyed by default.	`boolean`	`false`
lazyRender	Used with `keepDOM`; when `true`, the content is not rendered on mount but after the first expansion.	`boolean`	`false`
motion	Whether to enable the animation.	`boolean`	`true`
onMotionEnd	Called when the expand or collapse animation ends.	`Type`	-
ref	Reference to the outer wrapper (`div`).	`Type`	-
style	Style of the outer wrapper.	`React.CSSProperties`	-

Other native attributes (such as aria-*, data-* and onMouseEnter) land on the outer wrapper. The onTransitionEnd handler you pass runs together with the component's own handling.

Accessibility

ARIA

Collapsible has id props, the value passed in will be set as the id of the inner content element (not the outer wrapper). The trigger button points at it with aria-controls and reports whether it is open with aria-expanded, see the usage example below.

import { useState } from 'react';
import { Button, Collapsible } from '@fibrous/semi-ui-react';

() => {
    const collapseId = 'myCollapsible';
    const [visible, setVisible] = useState(false);
    return (
        <>
            <Button onClick={() => setVisible(!visible)} aria-expanded={visible} aria-controls={collapseId}>
                {visible ? 'hide' : 'show'}
            </Button>
            <Collapsible isOpen={visible} id={collapseId}>
                <div>hide content</div>
            </Collapsible>
        </>
    );
};

Focus

With collapseHeight of 0, the collapsed content is inert: screen readers skip it and Tab cannot reach it.
With collapseHeight above 0, the visible preview and the clipped part are the same element, and the clipped part cannot be hidden on its own, so the whole content stays readable and focusable and screen reader users get the full text. Do not put links, buttons or other focusable elements in the clipped part, or keyboard focus lands where it cannot be seen.

FAQ

Why Collapsible does not expand as expected?
The expanded height of Collapsible is computed by CSS and does not depend on measuring the node, so toggling isOpen under a parent with display: none still gives the correct expanded height. First check that isOpen follows your state; with collapseHeight above 0, part of the content is visible while collapsed by design.