Collapse

Toggle the visibility of content across your project with a few classes and our JavaScript plugins.

Example

The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle.

Preview

Jsx

Props

Collapse With Link

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.

import React, { useState } from 'react';
import { Button, Card, Collapse } from 'react-bootstrap';
import { Link } from 'react-router-dom';

const BasicExample = () => {
    const [open, setOpen] = useState(false);
  return (
    <>
        <Link to="#" onClick={() => setOpen(!open)} >Collapse With Link</Link>
        <Button variant="primary" onClick={() => setOpen(!open)} >Collapse With Button</Button>
        <Collapse in={open}>
            <Card body id="example-collapse-text">
                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>
        </Collapse>
    </>
  );
}

export default BasicExample;

props	Type	Default	Description
`appear`	boolean	`false`	Run the expand animation when the component mounts, if it is initially shown
`children^required`	element	`true`	You must provide a single JSX child element to this component and that element cannot be a <React.Fragment>
`dimension`	`'height'` \| `'width'` \| function	`'height'`	The dimension used when collapsing, or a function that returns the dimension
`in`	boolean	`false`	Show the component; triggers the expand or collapse animation

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Horizontal

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

Preview

Jsx

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.

import React, { useState } from 'react';
import { Button, Card, Col, Collapse, Row } from 'react-bootstrap';
import { Link } from 'react-router-dom';

const CollapseHorizontal = () => {
    const [open, setOpen] = useState(false);
  return (
    <Row>
        <Col sm>
            <Button
                onClick={() => setOpen(!open)}
                aria-controls="example-collapse-text"
                aria-expanded={open}
                className="mb-3"
            >
                Collapse Horizontal
            </Button>
            <Row>
                <Col>
                    <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>
                </Col>
            </Row>
        </Col>
    </Row>
  );
}

export default CollapseHorizontal;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Example
Horizontal