Search...

Collapse

React Bootstrap 5 Collapse

React Bootstrap 5 Collapse is a content toggler component. It's useful for collecting a lot of text and/or visuals into expandable and collapsible pieces.

Collapse is a tool for displaying and hiding content. Buttons or anchors serve as triggers for certain items that you toggle. When you collapse an element, the 'height' value will animate from its current value to '0'.

Importing the Contrast Collapse Component

Begin by importing 'CDBCollapse' into your project to use the React Bootstrap 5 Collapse component. We'll also use the CDBBtn component in this tutorial, To learn more, see our docs.

js
import { CDBCollapse } from 'cdbreact';

Default Collapse .

The isOpen prop is passed to the Contrast React Bootstrap 5 Collapse component. The isOpen property accepts a Boolean value that indicates whether the Accordion is open or closed. The Accordion is opened if its value is 'true.'

We define a variable collapseID in the code block below, which we will provide into the isOpen prop on the CDBCollapse.

The toggleCollapse function toggles between true and false for the collapseID. The toggleCollapse function is triggered by the CDBBtn component.

React Bootstrap 5 Collapse

js
import React from 'react';
import { CDBBtn, CDBCollapse, CDBContainer } from 'cdbreact';
class Collapse extends Component {
state = {
collapseID: '',
};
toggleCollapse = collapseID => () => {
this.setState(prevState => ({
collapseID: prevState.collapseID !== collapseID ? collapseID : '',
}));
};
render() {
return (
<CDBContainer>
<div
style={{
margin: 'auto',
width: '80%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
minHeight: '100vh',
}}
>
<CDBBtn
color="primary"
onClick={this.toggleCollapse('basicCollapse')}
style={{ marginBottom: '1rem' }}
>
COLLAPSE BUTTON
</CDBBtn>
<CDBCollapse id="basicCollapse" isOpen={this.state.collapseID}>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum
</p>
</CDBCollapse>
</div>
</CDBContainer>
);
}
}

Contrast React Bootstrap 5 Collapse Props

The props you get to use with the React Bootstrap 5 Collapse component will be expanded upon in this section. You'll learn what these props do, how to utilize them in your code, and what their default values are.

Other prop alternatives for the 'CDBCollapse' component are listed in the table below.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBCollapse className="myClass" ... />
delayNumber or Object{show: 350, hide: 350}Defines how many milliseconds the open/close event are delayed<CDBCollapse delay={{show: 3000, hide: 7000}} ... />
disableBooleanfalseDisables Collapse component<CDBCollapse disabled .../>
navbarBooleanfalseAdds navbar-collapse bootstrap class to class name property<CDBCollapse navbar ... />
isOpenString or BooleanDefines if accordion is opened or closed<CDBCollapse isOpen ... />
onOpenedfunctionDefines the function which fires when Accordion has opened<CDBCollapse onOpened={yourFunction} ... />
onClosedfunctionDefines the function which fires when Accordion has closed<CDBCollapse onClosed={yourFunction} ... />

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.