React Bootstrap Accordion
React Accordion - 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
Accordions can toggle through a number of text blocks with a single click, and that greatly increases the UX of your project.
Examples of Bootstrap Accordion use:
- FAQ page
- Multiple items presentation
- Data tables
Basic example MDB Pro component
Material Design styling for Bootstrap Accordion component
import React, { Component } from "react";
import {
MDBContainer,
MDBCollapse,
MDBCard,
MDBCardBody,
MDBCollapseHeader
} from "mdbreact";
class CollapsePage extends Component {
state={
collapseID: "collapse3"
}
toggleCollapse = collapseID => () =>
this.setState(prevState => ({
collapseID: prevState.collapseID !== collapseID ? collapseID : ""
}));
render() {
const { collapseID } = this.state;
return (
<MDBContainer>
<MDBContainer className='md-accordion mt-5'>
<MDBCard className='mt-3'>
<MDBCollapseHeader
tagClassName='d-flex justify-content-between'
onClick={() => this.toggleCollapse('collapse1')}
>
Collapsible Group Item #1
<MDBIcon
icon={collapseID === 'collapse1' ? 'angle-up' : 'angle-down'}
/>
</MDBCollapseHeader>
<MDBCollapse id='collapse1' isOpen={collapseID}>
<MDBCardBody>
Pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid. 3 wolf moon officia aute, non
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt
laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a
bird on it squid single-origin coffee nulla assumenda shoreditch
et. Nihil anim keffiyeh helvetica, craft beer labore wes
anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't
heard of them accusamus labore sustainable VHS.
</MDBCardBody>
</MDBCollapse>
</MDBCard>
<MDBCard>
<MDBCollapseHeader
tagClassName='d-flex justify-content-between'
onClick={() => this.toggleCollapse('collapse2')}
>
Collapsible Group Item #2
<MDBIcon
icon={collapseID === 'collapse2' ? 'angle-up' : 'angle-down'}
/>
</MDBCollapseHeader>
<MDBCollapse id='collapse2' isOpen={collapseID}>
<MDBCardBody>
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus terry richardson ad squid. 3 wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa
nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
put a bird on it squid single-origin coffee nulla assumenda
shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
wes anderson cred nesciunt sapiente ea proident. Ad vegan
excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably
haven't heard of them accusamus labore sustainable VHS.
</MDBCardBody>
</MDBCollapse>
</MDBCard>
<MDBCard>
<MDBCollapseHeader
tagClassName='d-flex justify-content-between'
onClick={() => this.toggleCollapse('collapse3')}
>
Collapsible Group Item #3
<MDBIcon
icon={collapseID === 'collapse3' ? 'angle-up' : 'angle-down'}
/>
</MDBCollapseHeader>
<MDBCollapse id='collapse3' isOpen={collapseID}>
<MDBCardBody>
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus terry richardson ad squid. 3 wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa
nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
put a bird on it squid single-origin coffee nulla assumenda
shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
wes anderson cred nesciunt sapiente ea proident. Ad vegan
excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably
haven't heard of them accusamus labore sustainable VHS.
</MDBCardBody>
</MDBCollapse>
</MDBCard>
</MDBContainer>
</MDBContainer>
);
}
}
export default CollapsePage;
Accordion with gradient background MDB Pro component
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable.
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.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
import React, { Component } from "react";
import {
MDBContainer,
MDBCollapse,
MDBCard,
MDBCardBody,
MDBCollapseHeader,
MDBIcon
} from "mdbreact";
class CollapsePage extends Component {
state={
collapseID: "collapse1"
}
toggleCollapse = collapseID => () =>
this.setState(prevState => ({
collapseID: prevState.collapseID !== collapseID ? collapseID : ""
}));
render() {
return (
<MDBContainer>
<MDBContainer className="accordion-gradient-bcg p-5">
<MDBCard
style={{ backgroundColor: "rgba(0,0,0,.03)" }}
className="my-1"
>
<MDBCollapseHeader onClick={this.toggleCollapse("collapse1")}>
<span className="white-text">#1</span>
<MDBIcon
icon={
this.state.collapseID === "collapse1"
? "angle-up"
: "angle-down"
}
className="white-text"
style={{ float: "right" }}
/>
</MDBCollapseHeader>
<MDBCollapse id="collapse1" isOpen={this.state.collapseID}>
<MDBCardBody className="rgba-grey-light white-text">
Pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid. 3 wolf moon officia aute, non
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt
laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a
bird on it squid single-origin coffee nulla assumenda shoreditch
et. Nihil anim keffiyeh helvetica, craft beer labore wes
anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't
heard of them accusamus labore sustainable VHS.
</MDBCardBody>
</MDBCollapse>
</MDBCard>
<MDBCard style={{ backgroundColor: "rgba(0,0,0,.03)" }}>
<MDBCollapseHeader onClick={this.toggleCollapse("collapse2")}>
<span className="white-text">#2</span>
<MDBIcon
icon={
this.state.collapseID === "collapse2"
? "angle-up"
: "angle-down"
}
className="white-text"
style={{ float: "right" }}
/>
</MDBCollapseHeader>
<MDBCollapse id="collapse2" isOpen={this.state.collapseID}>
<MDBCardBody className="rgba-grey-light white-text">
Pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid. 3 wolf moon officia aute, non
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt
laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a
bird on it squid single-origin coffee nulla assumenda shoreditch
et. Nihil anim keffiyeh helvetica, craft beer labore wes
anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't
heard of them accusamus labore sustainable VHS.
</MDBCardBody>
</MDBCollapse>
</MDBCard>
<MDBCard style={{ backgroundColor: "rgba(0,0,0,.03)" }}>
<MDBCollapseHeader onClick={this.toggleCollapse("collapse3")}>
<span className="white-text">#3</span>
<MDBIcon
icon={
this.state.collapseID === "collapse3"
? "angle-up"
: "angle-down"
}
className="white-text"
style={{ float: "right" }}
/>
</MDBCollapseHeader>
<MDBCollapse id="collapse3" isOpen={this.state.collapseID}>
<MDBCardBody className="rgba-grey-light white-text">
Pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid. 3 wolf moon officia aute, non
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt
laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a
bird on it squid single-origin coffee nulla assumenda shoreditch
et. Nihil anim keffiyeh helvetica, craft beer labore wes
anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't
heard of them accusamus labore sustainable VHS.
</MDBCardBody>
</MDBCollapse>
</MDBCard>
</MDBContainer>
</MDBContainer>
);
}
}
export default CollapsePage;
Accordion with a picture MDB Pro component
Hi! I am the first one.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Hi! I am the second one.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Hi! I am the third one.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
import React, { Component } from 'react';
import {
MDBContainer,
MDBCol,
MDBCollapse,
MDBCard,
MDBCardBody,
MDBCollapseHeader,
MDBCardImage,
MDBRow,
MDBView
} from 'mdbreact';
class CollapsePage extends Component {
state = {
collapseID: 'collapse1'
};
toggleCollapse = collapseID => () =>
this.setState(prevState => ({
collapseID: prevState.collapseID !== collapseID ? collapseID : ''
}));
render() {
const { collapseID } = this.state;
return (
<MDBContainer>
<MDBContainer className='accordion md-accordion accordion-1'>
<MDBCard style={{ backgroundColor: 'transparent' }}>
<MDBCollapseHeader
onClick={this.toggleCollapse('collapse1')}
className='text-uppercase blue lighten-3 z-depth-1'
>
<span className='white-text font-weight-bold'>
I am the first title of accordion
</span>
</MDBCollapseHeader>
<MDBCollapse id='collapse1' isOpen={collapseID}>
<MDBCardBody>
<MDBRow className='my-4'>
<MDBCol md='8'>
<h2 className='font-weight-bold mb-3 black-text'>
Hi! I am the first one.
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris
</p>
<p className='mb-0 '>
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
</p>
</MDBCol>
<MDBCol md='4' className='mt-3 pt-2'>
<MDBView className='z-depth-1'>
<MDBCardImage
className='img-fluid z-depth-1'
src='https://mdbootstrap.com/img/Photos/Others/nature.webp'
alt=''
/>
</MDBView>
</MDBCol>
</MDBRow>
</MDBCardBody>
</MDBCollapse>
</MDBCard>
<MDBCard style={{ backgroundColor: 'transparent' }}>
<MDBCollapseHeader
onClick={this.toggleCollapse('collapse2')}
className='text-uppercase blue lighten-3 z-depth-1'
>
<span className='white-text font-weight-bold'>
I am the second title of accordion
</span>
</MDBCollapseHeader>
<MDBCollapse id='collapse2' isOpen={collapseID}>
<MDBCardBody>
<MDBRow className='my-4'>
<MDBCol md='8'>
<h2 className='font-weight-bold mb-3 black-text'>
Hi! I am the second one.
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris
</p>
<p className='mb-0 '>
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
</p>
</MDBCol>
<MDBCol md='4' className='mt-3 pt-2'>
<MDBView className='z-depth-1'>
<MDBCardImage
className='img-fluid'
src='https://mdbootstrap.com/img/Photos/Others/nature.webp'
alt=''
/>
</MDBView>
</MDBCol>
</MDBRow>
</MDBCardBody>
</MDBCollapse>
</MDBCard>
<MDBCard style={{ backgroundColor: 'transparent' }}>
<MDBCollapseHeader
onClick={this.toggleCollapse('collapse3')}
className='text-uppercase blue lighten-3 z-depth-1'
>
<span className='white-text font-weight-bold'>
I am the third title of accordion
</span>
</MDBCollapseHeader>
<MDBCollapse id='collapse3' isOpen={collapseID}>
<MDBCardBody>
<MDBRow className='my-4'>
<MDBCol md='8'>
<h2 className='font-weight-bold mb-3 black-text'>
Hi! I am the third one.
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris
</p>
<p className='mb-0 '>
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
</p>
</MDBCol>
<MDBCol md='4' className='mt-3 pt-2'>
<MDBView className='z-depth-1'>
<MDBCardImage
className='img-fluid'
src='https://mdbootstrap.com/img/Photos/Others/nature.webp'
alt=''
/>
</MDBView>
</MDBCol>
</MDBRow>
</MDBCardBody>
</MDBCollapse>
</MDBCard>
</MDBContainer>
</MDBContainer>
);
}
}
export default CollapsePage;
Accordion with icons MDB Pro component
Hello my friends, I am the nicest accordion!
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
import React, { Component } from 'react';
import {
MDBContainer,
MDBCollapse,
MDBCard,
MDBCardBody,
MDBCollapseHeader,
MDBIcon,
} from 'mdbreact';
class CollapsePage extends Component {
state = {
collapseID: 'collapse1'
};
toggleCollapse = collapseID => () =>
this.setState(prevState => ({
collapseID: prevState.collapseID !== collapseID ? collapseID : ''
}));
render() {
return (
<MDBContainer>
<MDBContainer
className='accordion md-accordion accordion-3 z-depth-1-half'
>
<div className='d-flex justify-content-center pt-5'>
<MDBIcon icon='anchor' className='red-text mx-3' size='2x' />
<MDBIcon far icon='life-ring' className='red-text mx-3' size='2x' />
<MDBIcon far icon='star' className='red-text mx-3' size='2x' />
</div>
<h2 class='text-center text-uppercase red-text py-4 px-3'>
Hello my friends, I am the nicest accordion!
</h2>
<hr class='mb-0' />
<MDBCard>
<MDBCollapseHeader
onClick={this.toggleCollapse('collapse1')}
tag='h3'
tagClassName='red-text d-flex justify-content-between align-items-center'
>
How awesome accordion I am?
<MDBIcon
icon={
this.state.collapseID === 'collapse1'
? 'angle-up'
: 'angle-down'
}
className='red-text'
size='2x'
/>
</MDBCollapseHeader>
<MDBCollapse id='collapse1' isOpen={this.state.collapseID}>
<MDBCardBody class='pt-0'>
<p>
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus terry richardson ad squid. 3 wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa
nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
aliqua put a bird on it squid single-origin coffee nulla
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft
beer labore wes anderson cred nesciunt sapiente ea proident.
Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
beer farm-to-table, raw denim aesthetic synth nesciunt you
probably haven't heard of them accusamus labore sustainable
VHS.
</p>
</MDBCardBody>
</MDBCollapse>
</MDBCard>
<MDBCard>
<MDBCollapseHeader
onClick={this.toggleCollapse('collapse2')}
tag='h3'
tagClassName='red-text d-flex justify-content-between align-items-center'
>
You're the greatest accordion!
<MDBIcon
icon={
this.state.collapseID === 'collapse2'
? 'angle-up'
: 'angle-down'
}
className='red-text'
size='2x'
/>
</MDBCollapseHeader>
<MDBCollapse id='collapse2' isOpen={this.state.collapseID}>
<MDBCardBody class='pt-0'>
<p>
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus terry richardson ad squid. 3 wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa
nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
aliqua put a bird on it squid single-origin coffee nulla
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft
beer labore wes anderson cred nesciunt sapiente ea proident.
Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
beer farm-to-table, raw denim aesthetic synth nesciunt you
probably haven't heard of them accusamus labore sustainable
VHS.
</p>
</MDBCardBody>
</MDBCollapse>
</MDBCard>
<MDBCard>
<MDBCollapseHeader
onClick={this.toggleCollapse('collapse3')}
tag='h3'
tagClassName='red-text d-flex justify-content-between align-items-center'
>
Thank you my dear!
<MDBIcon
icon={
this.state.collapseID === 'collapse3'
? 'angle-up'
: 'angle-down'
}
className='red-text'
size='2x'
/>
</MDBCollapseHeader>
<MDBCollapse id='collapse3' isOpen={this.state.collapseID}>
<MDBCardBody class='pt-0'>
<p>
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus terry richardson ad squid. 3 wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa
nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
aliqua put a bird on it squid single-origin coffee nulla
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft
beer labore wes anderson cred nesciunt sapiente ea proident.
Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
beer farm-to-table, raw denim aesthetic synth nesciunt you
probably haven't heard of them accusamus labore sustainable
VHS.
</p>
</MDBCardBody>
</MDBCollapse>
</MDBCard>
</MDBContainer>
</MDBContainer>
);
}
}
export default CollapsePage;
Accordion with teal cards MDB Pro component
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore.
import React, { Component } from "react";
import {
MDBContainer,
MDBCollapse,
MDBCard,
MDBCardBody,
MDBCollapseHeader
} from "mdbreact";
class CollapsePage extends Component {
state={
collapseID: "collapse1"
}
toggleCollapse = collapseID => () =>
this.setState(prevState => ({
collapseID: prevState.collapseID !== collapseID ? collapseID : ""
}));
render() {
return (
<MDBContainer>
<MDBContainer className="accordion md-accordion accordion-4">
<MDBCard>
<MDBCollapseHeader
onClick={this.toggleCollapse("collapse1")}
className="z-depth-1 teal lighten-4"
tagClassName="white-text text-center font-weight-bold text-uppercase"
tag="h4"
>
First title
</MDBCollapseHeader>
<MDBCollapse id="collapse1" isOpen={this.state.collapseID}>
<MDBCardBody className="rgba-teal-strong white-text">
<p>
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus terry richardson ad squid. 3 wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa
nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
aliqua put a bird on it squid single-origin coffee nulla
assumenda shoreditch et.
</p>
<p>
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo. Leggings occaecat craft beer farm-to-table, raw
denim aesthetic synth nesciunt you probably haven't heard of
them accusamus labore.
</p>
</MDBCardBody>
</MDBCollapse>
</MDBCard>
<MDBCard>
<MDBCollapseHeader
onClick={this.toggleCollapse("collapse2")}
className="z-depth-1 teal lighten-3"
tagClassName="white-text text-center font-weight-bold text-uppercase"
tag="h4"
>
Second title
</MDBCollapseHeader>
<MDBCollapse id="collapse2" isOpen={this.state.collapseID}>
<MDBCardBody className="rgba-teal-strong white-text">
<p>
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus terry richardson ad squid. 3 wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa
nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
aliqua put a bird on it squid single-origin coffee nulla
assumenda shoreditch et.
</p>
<p>
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo. Leggings occaecat craft beer farm-to-table, raw
denim aesthetic synth nesciunt you probably haven't heard of
them accusamus labore.
</p>
</MDBCardBody>
</MDBCollapse>
</MDBCard>
<MDBCard>
<MDBCollapseHeader
onClick={this.toggleCollapse("collapse3")}
className="z-depth-1 teal lighten-2"
tagClassName="white-text text-center font-weight-bold text-uppercase"
tag="h4"
>
Third title
</MDBCollapseHeader>
<MDBCollapse id="collapse3" isOpen={this.state.collapseID}>
<MDBCardBody className="rgba-teal-strong white-text">
<p>
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus terry richardson ad squid. 3 wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa
nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
aliqua put a bird on it squid single-origin coffee nulla
assumenda shoreditch et.
</p>
<p>
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo. Leggings occaecat craft beer farm-to-table, raw
denim aesthetic synth nesciunt you probably haven't heard of
them accusamus labore.
</p>
</MDBCardBody>
</MDBCollapse>
</MDBCard>
<MDBCard>
<MDBCollapseHeader
onClick={this.toggleCollapse("collapse4")}
className="z-depth-1 teal lighten-1"
tagClassName="white-text text-center font-weight-bold text-uppercase"
tag="h4"
>
Fourth title
</MDBCollapseHeader>
<MDBCollapse id="collapse4" isOpen={this.state.collapseID}>
<MDBCardBody className="rgba-teal-strong white-text">
<p>
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus terry richardson ad squid. 3 wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa
nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
aliqua put a bird on it squid single-origin coffee nulla
assumenda shoreditch et.
</p>
<p>
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo. Leggings occaecat craft beer farm-to-table, raw
denim aesthetic synth nesciunt you probably haven't heard of
them accusamus labore.
</p>
</MDBCardBody>
</MDBCollapse>
</MDBCard>
<MDBCard>
<MDBCollapseHeader
onClick={this.toggleCollapse("collapse5")}
className="z-depth-1 teal"
tagClassName="white-text text-center font-weight-bold text-uppercase"
tag="h4"
>
Fifth title
</MDBCollapseHeader>
<MDBCollapse id="collapse5" isOpen={this.state.collapseID}>
<MDBCardBody className="rgba-teal-strong white-text">
<p>
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus terry richardson ad squid. 3 wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa
nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
aliqua put a bird on it squid single-origin coffee nulla
assumenda shoreditch et.
</p>
<p>
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo. Leggings occaecat craft beer farm-to-table, raw
denim aesthetic synth nesciunt you probably haven't heard of
them accusamus labore.
</p>
</MDBCardBody>
</MDBCollapse>
</MDBCard>
</MDBContainer>
</MDBContainer>
);
}
}
export default CollapsePage;
Accordion with a photo in the background MDB Pro component
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
import React, { Component } from "react";
import {
MDBContainer,
MDBCol,
MDBRow,
MDBCollapse,
MDBCollapseHeader,
MDBCard,
MDBCardBody,
MDBIcon
} from "mdbreact";
class CollapsePage extends Component {
state={
collapseID: "collapse1"
}
toggleCollapse = collapseID => () =>
this.setState(prevState => ({
collapseID: prevState.collapseID !== collapseID ? collapseID : ""
}));
render() {
return (
<MDBContainer>
<MDBCard
className="card-image"
style={{
backgroundImage: `url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.webp)`
}}
>
<div className="rgba-black-strong py-5 px-4">
<MDBRow className="d-flex justify-content-center">
<MDBCol md="10" xl="8">
<MDBContainer className="accordion md-accordion accordion-5">
<MDBCard className="mb-4">
<MDBCollapseHeader
onClick={this.toggleCollapse("collapse1")}
className="p-0 z-depth-1"
tag="h4"
tagClassName="text-uppercase white-text mb-0 d-flex justify-content-start align-items-center"
>
<div
className="d-flex justify-content-center align-items-center mr-4"
style={{ backgroundColor: "#fff", minWidth: "100px" }}
>
<MDBIcon
icon="cloud"
size="2x"
className="m-3 black-text"
/>
</div>
Item #1
</MDBCollapseHeader>
<MDBCollapse id="collapse1" isOpen={this.state.collapseID}>
<MDBCardBody className="rgba-black-light white-text z-depth-1">
<p className="p-md-4 mb-0">
Anim pariatur cliche reprehenderit, enim eiusmod high
life accusamus terry richardson ad squid. 3 wolf moon
officia aute, non cupidatat skateboard dolor brunch.
Food truck quinoa nesciunt laborum eiusmod. Brunch 3
wolf moon tempor, sunt aliqua put a bird on it squid
single-origin coffee nulla assumenda shoreditch et.
</p>
</MDBCardBody>
</MDBCollapse>
</MDBCard>
<MDBCard className="mb-4">
<MDBCollapseHeader
onClick={this.toggleCollapse("collapse2")}
className="p-0 z-depth-1"
tag="h4"
tagClassName="text-uppercase white-text mb-0 d-flex justify-content-start align-items-center"
>
<div
className="d-flex justify-content-center align-items-center mr-4"
style={{ backgroundColor: "#fff", minWidth: "100px" }}
>
<MDBIcon
icon="comment-alt"
size="2x"
className="m-3 black-text"
/>
</div>
Item #2
</MDBCollapseHeader>
<MDBCollapse id="collapse2" isOpen={this.state.collapseID}>
<MDBCardBody className="rgba-black-light white-text z-depth-1">
<p className="p-md-4 mb-0">
Anim pariatur cliche reprehenderit, enim eiusmod high
life accusamus terry richardson ad squid. 3 wolf moon
officia aute, non cupidatat skateboard dolor brunch.
Food truck quinoa nesciunt laborum eiusmod. Brunch 3
wolf moon tempor, sunt aliqua put a bird on it squid
single-origin coffee nulla assumenda shoreditch et.
</p>
</MDBCardBody>
</MDBCollapse>
</MDBCard>
<MDBCard className="mb-4">
<MDBCollapseHeader
onClick={this.toggleCollapse("collapse3")}
className="p-0 z-depth-1"
tag="h4"
tagClassName="text-uppercase white-text mb-0 d-flex justify-content-start align-items-center"
>
<div
className="d-flex justify-content-center align-items-center mr-4"
style={{ backgroundColor: "#fff", minWidth: "100px" }}
>
<MDBIcon
icon="cogs"
size="2x"
className="m-3 black-text"
/>
</div>
Item #3
</MDBCollapseHeader>
<MDBCollapse id="collapse3" isOpen={this.state.collapseID}>
<MDBCardBody className="rgba-black-light white-text z-depth-1">
<p className="p-md-4 mb-0">
Anim pariatur cliche reprehenderit, enim eiusmod high
life accusamus terry richardson ad squid. 3 wolf moon
officia aute, non cupidatat skateboard dolor brunch.
Food truck quinoa nesciunt laborum eiusmod. Brunch 3
wolf moon tempor, sunt aliqua put a bird on it squid
single-origin coffee nulla assumenda shoreditch et.
</p>
</MDBCardBody>
</MDBCollapse>
</MDBCard>
</MDBContainer>
</MDBCol>
</MDBRow>
</div>
</MDBCard>
</MDBContainer>
);
}
}
export default CollapsePage;
React Accordion - API
In this section you will find advanced information about the Accordion 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.
Accordion import statement
In order to use Accordion component make sure you have imported proper module first.
import { MDBCollapse, MDBCollapseHeader } from "mdbreact";
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 | false | Defines should collapse item be opened or closed | <MDBCollapse isOpen={true} ... /> |
delay |
Function | 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" ... /> |
tagClassName |
String | |
Adds custom classes to the inner tag element | <MDBCollapseHeader tagClassName="myClass" ... /> |