---
title: React Collapse Component
name: Collapse
description: 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.
menu: Components
route: /components/collapse
other_frameworks: collapse
---

import { useState } from 'react'

import {
  CButton,
  CCard,
  CCardBody,
  CCol,
  CCollapse,
  CContainer,
  CRow,
} from '@coreui/react/src/index'

## 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.

export const BasicExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton
        color="primary"
        href="#"
        onClick={(event) => {
          event.preventDefault()
          setVisible(!visible)
        }}
      >
        Link
      </CButton>
      <CButton color="primary" onClick={() => setVisible(!visible)}>
        Button
      </CButton>
      <CCollapse visible={visible}>
        <CCard className="mt-3">
          <CCardBody>
            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.
          </CCardBody>
        </CCard>
      </CCollapse>
    </>
  )
}

<Example>
  <BasicExample />
</Example>

```jsx
const [visible, setVisible] = useState(false)
return (
  <>
    <CButton
      color="primary"
      href="#"
      onClick={(event) => {
        event.preventDefault()
        setVisible(!visible)
      }}
    >
      Link
    </CButton>
    <CButton color="primary" onClick={() => setVisible(!visible)}>
      Button
    </CButton>
    <CCollapse visible={visible}>
      <CCard className="mt-3">
        <CCardBody>
          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.
        </CCardBody>
      </CCard>
    </CCollapse>
  </>
)
```

## 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.

export const HorizontalExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton
        color="primary"
        className="mb-3"
        onClick={() => setVisible(!visible)}
        aria-expanded={visible}
        aria-controls="collapseWidthExample"
      >
        Button
      </CButton>
      <div style={{ minHeight: '120px' }}>
        <CCollapse id="collapseWidthExample" horizontal visible={visible}>
          <CCard style={{ width: '300px' }}>
            <CCardBody>
              This is some placeholder content for a horizontal collapse. It's hidden by default and
              shown when triggered.
            </CCardBody>
          </CCard>
        </CCollapse>
      </div>
    </>
  )
}

<Example>
  <HorizontalExample />
</Example>

```jsx
const [visible, setVisible] = useState(false)
return (
  <>
    <CButton
      className="mb-3"
      onClick={() => setVisible(!visible)}
      aria-expanded={visible}
      aria-controls="collapseWidthExample"
    >
      Button
    </CButton>
    <div style={{ minHeight: '120px' }}>
      <CCollapse id="collapseWidthExample" horizontal visible={visible}>
        <CCard style={{ width: '300px' }}>
          <CCardBody>
            This is some placeholder content for a horizontal collapse. It's hidden by default and
            shown when triggered.
          </CCardBody>
        </CCard>
      </CCollapse>
    </div>
  </>
)
```

## Multiple targets

A `<CButton>` can show and hide multiple elements.

export const MultipleTargetsExample = () => {
  const [visibleA, setVisibleA] = useState(false)
  const [visibleB, setVisibleB] = useState(false)
  return (
    <>
      <CButton color="primary" onClick={() => setVisibleA(!visibleA)}>
        Toggle first element
      </CButton>
      <CButton color="primary" onClick={() => setVisibleB(!visibleB)}>
        Toggle second element
      </CButton>
      <CButton
        color="primary"
        onClick={() => {
          setVisibleA(!visibleA)
          setVisibleB(!visibleB)
        }}
      >
        Toggle both elements
      </CButton>
      <CRow>
        <CCol xs={6}>
          <CCollapse visible={visibleA}>
            <CCard className="mt-3">
              <CCardBody>
                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.
              </CCardBody>
            </CCard>
          </CCollapse>
        </CCol>
        <CCol xs={6}>
          <CCollapse visible={visibleB}>
            <CCard className="mt-3">
              <CCardBody>
                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.
              </CCardBody>
            </CCard>
          </CCollapse>
        </CCol>
      </CRow>
    </>
  )
}

<Example>
  <MultipleTargetsExample />
</Example>

```jsx
const [visibleA, setVisibleA] = useState(false)
const [visibleB, setVisibleB] = useState(false)
return (
  <>
    <CButton color="primary" onClick={() => setVisibleA(!visibleA)}>
      Toggle first element
    </CButton>
    <CButton color="primary" onClick={() => setVisibleB(!visibleB)}>
      Toggle second element
    </CButton>
    <CButton
      color="primary"
      onClick={() => {
        setVisibleA(!visibleA)
        setVisibleB(!visibleB)
      }}
    >
      Toggle both elements
    </CButton>
    <CRow>
      <CCol xs={6}>
        <CCollapse visible={visibleA}>
          <CCard className="mt-3">
            <CCardBody>
              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.
            </CCardBody>
          </CCard>
        </CCollapse>
      </CCol>
      <CCol xs={6}>
        <CCollapse visible={visibleB}>
          <CCard className="mt-3">
            <CCardBody>
              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.
            </CCardBody>
          </CCard>
        </CCollapse>
      </CCol>
    </CRow>
  </>
)
```

## API

### CCollapse

`markdown:CCollapse.api.mdx`
