React Collapse Component

Collapse

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.

Available in Other JavaScript Frameworks

CoreUI React Collapse Component is also available for Angular, Bootstrap, and Vue. Explore framework-specific implementations below:

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

The stylesheet owns the animation where the browser can interpolate a size to auto; elsewhere the component measures the two sizes and the stylesheet still times the move between them. Either way the duration and easing come from --cui-transition-collapse-duration and --cui-transition-collapse-timing, so changing them changes both paths.

Example

You can use a link or a button component.

import React, { useState } from 'react'
import { CButton, CCollapse, CCard, CCardBody } from '@coreui/react'

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

import React, { useState } from 'react'
import { CButton, CCollapse, CCard, CCardBody } from '@coreui/react'

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

import React, { useState } from 'react'
import { CButton, CCollapse, CCard, CCardBody } from '@coreui/react'

export const CollapseHorizontalExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton
        theme="primary"
        className="mb-4"
        onClick={() => setVisible(!visible)}
        aria-expanded={visible}
        aria-controls="collapseWidthExample"
      >
        Button
      </CButton>
      <div style={{ minHeight: '120px' }}>
        <CCollapse id="collapseWidthExample" horizontal show={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>
    </>
  )
}

import React, { useState } from 'react'
import { CButton, CCollapse, CCard, CCardBody } from '@coreui/react'

export const CollapseHorizontalExample = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <CButton
        theme="primary"
        className="mb-4"
        onClick={() => setVisible(!visible)}
        aria-expanded={visible}
        aria-controls="collapseWidthExample"
      >
        Button
      </CButton>
      <div style={{ minHeight: '120px' }}>
        <CCollapse id="collapseWidthExample" horizontal show={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 toggles and targets

A <CButton> can show and hide multiple elements. Conversely, several buttons can show and hide the same element if they each drive its visible property.

import React, { useState } from 'react'
import { CButton, CCollapse, CCard, CCardBody, CCol, CRow } from '@coreui/react'

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

import React, { useState } from 'react'
import { CButton, CCollapse, CCard, CCardBody, CCol, CRow } from '@coreui/react'

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

Findable when collapsed

Added in v6.0.0

By default a collapsed area is removed from the layout, which also removes it from what the browser’s find-in-page can search. Add hiddenUntilFound to hide it with hidden="until-found" instead: the content stays laid out but invisible, so searching the page finds it, and the browser expands the area to show the match.

The browser reveals the content on its own, so onShow fires to let the declared state catch up — set visible from it, or the stylesheet hides the content the reader was just sent to.

import React, { useState } from 'react'
import { CButton, CCard, CCardBody, CCollapse } from '@coreui/react'

export const CollapseFindableExample = () => {
  const [visible, setVisible] = useState(false)

  return (
    <>
      <CButton theme="primary" onClick={() => setVisible(!visible)}>
        Toggle findable content
      </CButton>
      <CCollapse hiddenUntilFound show={visible} onShow={() => setVisible(true)}>
        <CCard className="mt-4">
          <CCardBody>
            Search this page for <strong>capybara</strong> with your browser's find-in-page and this
            panel opens on its own.
          </CCardBody>
        </CCard>
      </CCollapse>
    </>
  )
}

import React, { useState } from 'react'
import { CButton, CCard, CCardBody, CCollapse } from '@coreui/react'

export const CollapseFindableExample = () => {
  const [visible, setVisible] = useState(false)

  return (
    <>
      <CButton theme="primary" onClick={() => setVisible(!visible)}>
        Toggle findable content
      </CButton>
      <CCollapse hiddenUntilFound show={visible} onShow={() => setVisible(true)}>
        <CCard className="mt-4">
          <CCardBody>
            Search this page for <strong>capybara</strong> with your browser's find-in-page and this
            panel opens on its own.
          </CCardBody>
        </CCard>
      </CCollapse>
    </>
  )
}

Requires Chrome 102, Firefox 148 or Safari 26.2. Below those the attribute is left off, and the content is simply not findable — exactly as without the property.

Accessibility

<CCollapse> doesn’t touch your trigger element, so be sure to add aria-expanded to the control yourself. This attribute explicitly sends the current state of the collapsible element connected to the control to screen readers and related assistive technologies. Bind it to the same state you pass to the visible prop — aria-expanded={visible} — so it reads false while the collapsible element is closed and true while it is open, whichever control toggled it. If the control element’s HTML element is not a button (e.g., an <a> or <div>), the attribute role="button" should be added to the element.

If your control element is targeting a single collapsible element, you should also add the aria-controls attribute to the control, containing the id of the collapsible element (set the id on <CCollapse>). Modern screen readers and related assistive technologies address this attribute to provide users with extra shortcuts to navigate directly to the collapsible element itself.

Note that CoreUI’s current implementation does not cover the various optional keyboard interactions described in the WAI-ARIA Authoring Practices 1.1 accordion pattern — you will need to include these yourself with custom JavaScript.

API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

<CCollapse />