web
mobile
Edit these docs Rate these docs

React Bootstrap accordion

React Accordion - Bootstrap 4 & Material Design

React Bootstrap accordion is a component which organizes content within collapsable items. Accordion allows showing only one collapsed item at the same time.

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

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 } 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&apos;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&apos;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&apos;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&apos;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&apos;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&apos;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.jpeg'
                                  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.jpeg'
                                  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.jpeg'
                                  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.jpg)`
                  }}
                >
                  <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;
      
Edit these docs Rate these docs

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