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 onClick={this.toggleCollapse("collapse1")}>
                      Collapsible Group Item #1
                      <i className={ collapseID==="collapse1" ? "fa fa-angle-down rotate-icon" : "fa fa-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 onClick={this.toggleCollapse("collapse2")}>
                      Collapsible Group Item #2
                      <i className={ collapseID==="collapse2" ? "fa fa-angle-down rotate-icon" : "fa fa-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 onClick={this.toggleCollapse("collapse3")}>
                      Collapsible Group Item #3
                      <i className={ collapseID==="collapse3" ? "fa fa-angle-down rotate-icon" : "fa fa-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;
      

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 Object "" Defines how many miniseconds the open/close event are delayed <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" ... />