Bootstrap React Collapse

Bootstrap React Collapse component toggles the visibility of content across your project with a few classes and some scripts. Useful for a large amount of content.

On this page

How it works#

The collapse component is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from its current value to 0. Given how CSS handles animations, you cannot use padding on a .collapse element. Instead, use the class as an independent wrapping element.

Example#

You can use a link or a button component.

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.

1const [visible, setVisible] = useState(false)
2return (
3  <>
4    <CButton href="#" onClick={(event) => {
5      event.preventDefault()
6      setVisible(!visible)
7    }}>
8      Link
9    </CButton>
10    <CButton onClick={() => setVisible(!visible)}>Button</CButton>
11    <CCollapse visible={visible}>
12      <CCard className="mt-3">
13        <CCardBody>
14          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
15          squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
16          sapiente ea proident.
17        </CCardBody>
18      </CCard>
19    </CCollapse>
20  </>
21)

Horizontal#

The collapse plugin also supports horizontal collapsing. Add the horizontal property to transition the width instead of height and set a width on the immediate child element.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.

1const [visible, setVisible] = useState(false)
2return (
3  <>
4    <CButton className="mb-3" onClick={() => setVisible(!visible)} aria-expanded={visible} aria-controls="collapseWidthExample">Button</CButton>
5    <div style={{ minHeight: '120px'}}>
6      <CCollapse id="collapseWidthExample" horizontal visible={visible}>
7        <CCard style={{width: '300px'}}>
8          <CCardBody>
9            This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
10          </CCardBody>
11        </CCard>
12      </CCollapse>
13    </div>
14  </>
15)

Multiple targets#

A <CButton> can show and hide multiple elements.

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.

1const [visibleA, setVisibleA] = useState(false)
2const [visibleB, setVisibleB] = useState(false)
3return (
4  <>
5    <CButton onClick={() => setVisibleA(!visibleA)}>Toggle first element</CButton>
6    <CButton onClick={() => setVisibleB(!visibleB)}>Toggle second element</CButton>
7    <CButton
8      onClick={() => {
9        setVisibleA(!visibleA)
10        setVisibleB(!visibleB)
11      }}
12    >
13      Toggle both elements
14    </CButton>
15    <CRow>
16      <CCol xs={6}>
17        <CCollapse visible={visibleA}>
18          <CCard className="mt-3">
19            <CCardBody>
20              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
21              ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
22              sapiente ea proident.
23            </CCardBody>
24          </CCard>
25        </CCollapse>
26      </CCol>
27      <CCol xs={6}>
28        <CCollapse visible={visibleB}>
29          <CCard className="mt-3">
30            <CCardBody>
31              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
32              ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
33              sapiente ea proident.
34            </CCardBody>
35          </CCard>
36        </CCollapse>
37      </CCol>
38    </CRow>
39  </>
40)

API#

CCollapse#

1import { CCollapse } from '@coreui/bootstrap-react'
2// or
3import CCollapse from '@coreui/bootstrap-react/src/components/collapse/CCollapse'

Property	Description	Type	Default
className	A string of all className you want applied to the base component.	`string`	-
horizontal	Set horizontal collapsing to transition the width instead of height.	`boolean`	-
onHide	Callback fired when the component requests to be hidden.	`() => void`	-
onShow	Callback fired when the component requests to be shown.	`() => void`	-
visible	Toggle the visibility of component.	`boolean`	-