Toggle the visibility of content across your project with a few classes and our JavaScript plugins
Simple Collapse
By default, any number of panels can be expanded at a time. The first panel is expanded in this example.
This is panel header 1
This is panel header 2
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
This is panel header 3
Accordion
In accordion mode, only one panel can be expanded at a time.
This is panel header 1
This is panel header 2
This is panel header 3
Custom borderless accordion
Customize the background, border, margin styles and icon for each panel.
This is panel header 1
This is panel header 2
This is panel header 3
Some iconless
You can hide the arrow icon by passing showArrow= to CollapsePanel component.
This is panel header with arrow icon
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.