React Collapse Component

Collapse

New Year sale. Skyrocket your business in 2025!

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order!
Limited-time offer for the first 100 customers in 2025. Use code 2025SKY25 at checkout.

Get offer!

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.

Other Frameworks

CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.

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.

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.

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.

API#

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

<CCollapse />