Collapse

Add a collapse toggle animation to an element or component.

Basic Example

Add a collapse toggle animation to an element or component.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

const Collapses = () => {
    const [open, setOpen] = useState(false);    
    return (  
        <Fragment> 
            <Button
                onClick={() => setOpen(!open)}
                aria-controls="example-collapse-text"
                aria-expanded={open}
                >
                Toggle Button
            </Button>
            <Collapse in={open}>
                <div id="example-collapse-text" className="pt-3">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
                    terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
                    labore wes anderson cred nesciunt sapiente ea proident.
                </div>
            </Collapse>     
        </Fragment>
    )
}

Horizontal

Add a collapse toggle animation to an element or component to transition the width instead of height.

Design

Code

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

const Collapses = () => {
    const [open, setOpen] = useState(false);    
    return (  
        <Fragment> 
            <Button
                onClick={() => setOpen(!open)}
                aria-controls="example-collapse-text"
                aria-expanded={open}>
                    Click
            </Button>
            <div style={{ minHeight: '150px' }}>
                <Collapse in={open} dimension="width">
                <div id="example-collapse-text">
                    <Card body style={{ width: '400px' }}>
                    Anim pariatur cliche reprehenderit, enim eiusmod high life
                    accusamus terry richardson ad squid. Nihil anim keffiyeh
                    helvetica, craft beer labore wes anderson cred nesciunt sapiente
                    ea proident.
                    </Card>
                </div>
                </Collapse>
            </div>   
        </Fragment>
    )
}

Fade

Add a fade animation to a child element or component.

Design

Code

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

const Collapses = () => {    
    const [openFade, setOpenFade] = useState(false);
    return (
        <Fragment>   
            <Button
                onClick={() => setOpenFade(!openFade)}
                aria-controls="example-fade-text"
                aria-expanded={openFade}
                >
                Toggle text
            </Button>
            <Fade in={openFade}>
                <div id="example-fade-text" className="pt-4">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
                    terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
                    labore wes anderson cred nesciunt sapiente ea proident.
                </div>
            </Fade>  
        </Fragment>
    )
}