🤩
Windframe Import Update is finally here.

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} ... />

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help 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 UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast