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.

• Angular Collapse
• Bootstrap Collapse
• Vue Collapse

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 theheight from its current value to0. Given how CSS handles animations, you cannot usepadding on a.collapse element. Instead, use the class as an independent wrapping element.

Example#

You can use a link or a button component.

Horizontal#

The collapse plugin also supports horizontal collapsing. Add thehorizontal property to transition thewidth instead ofheight and set awidth on the immediate child element.

Multiple targets#

A<CButton> can show and hide multiple elements.

API#

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

• <CCollapse />