React Bootstrap Collapse
React Collapse - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
Collapse 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 it’s
current value to 0
.
Basic example
Click the buttons below to show and hide another element:
You can use a link with the href
attribute, or a button.
Accordion MDB Pro component
Using the card component, you can extend the default collapse behavior to create an accordion.
React Collapse - API
In this section you will find advanced information about the Collapse component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use in working with it.
Collapse import statement
In order to use Collapse component make sure you have imported proper module first.
MDBCollapse
The table below shows the configuration options of the MDBCollapse component.
Name | Type | Default | Description | Example |
---|---|---|---|---|
className |
String |
|
Adds custom classes | <MDBCollapse className="myClass" ... /> |
isOpen |
Boolean | Defines is accordion opened or closed | <MDBCollapse isOpen={true} ... /> |
|
delay |
Object | Defines how many milliseconds the open/close event are delayed | <MDBCollapse delay={{show: 2000, hide: 4000}} ... /> |
|
onOpened |
function | Defines the function which fires when Accordion has opened | <MDBCollapse onOpened={() => console.log('hello')} ... /> |
|
onClosed |
function | Defines the function which fires when Accordion has closed | <MDBCollapse onClosed={() => console.log('hello')} ... /> |
MDBCollapseHeader
The table below shows the configuration options of the MDBCollapseHeader component.
Name | Type | Default | Description | Example |
---|---|---|---|---|
tag |
String | Specifies the custom tag for the MDBCollapseHeader component | <MDBCollapseHeader tag="div" ... /> |
|
className |
String |
|
Adds custom classes | <MDBCollapseHeader className="myClass" ... /> |