Collapse

Result

Loading...

Live Editor

<Collapse renderOpenedTrigger={(setOpen, triggerProps) => ( <Button variant="secondary" onClick={() => setOpen(false)} aria-controls="collapsible-content" {...triggerProps} > Hide </Button> )} renderClosedTrigger={(setOpen, triggerProps) => ( <Button onClick={() => setOpen(true)} aria-controls="collapsible-content" {...triggerProps}> Open </Button> )} > <div id="collapsible-content">Here is some expanded content.</div> </Collapse>

<Collapse
    renderOpenedTrigger={(setOpen, triggerProps) => (
        <Button
            variant="secondary"
            onClick={() => setOpen(false)}
            aria-controls="collapsible-content"
            {...triggerProps}
        >
            Hide
        </Button>
    )}
    renderClosedTrigger={(setOpen, triggerProps) => (
        <Button onClick={() => setOpen(true)} aria-controls="collapsible-content" {...triggerProps}>
            Open
        </Button>
    )}
>
    <div id="collapsible-content">Here is some expanded content.</div>
</Collapse>

Render opened on first load

Result

Loading...

Live Editor

<Collapse renderOpenedTrigger={(setOpen, triggerProps) => ( <Button variant="secondary" onClick={() => setOpen(false)} aria-controls="collapsible-content" {...triggerProps} > Hide </Button> )} renderClosedTrigger={(setOpen, triggerProps) => ( <Button onClick={() => setOpen(true)} aria-controls="appear-content" {...triggerProps}> Open </Button> )} appear > <div id="appear-content"> The appear prop will cause the component to render opened the first time. </div> </Collapse>

<Collapse
    renderOpenedTrigger={(setOpen, triggerProps) => (
        <Button
            variant="secondary"
            onClick={() => setOpen(false)}
            aria-controls="collapsible-content"
            {...triggerProps}
        >
            Hide
        </Button>
    )}
    renderClosedTrigger={(setOpen, triggerProps) => (
        <Button onClick={() => setOpen(true)} aria-controls="appear-content" {...triggerProps}>
            Open
        </Button>
    )}
    appear
>
    <div id="appear-content">
        The appear prop will cause the component to render opened the first time.
    </div>
</Collapse>

Props