ReactJS MDBootstrap Accordion Component

Namachila October 14, 2025

0 2 2 minutes read

MDBootstrap is a Material Design and bootstrap-based react UI library that is used to make good-looking webpages with its seamless and easy-to-use component. In this article, we will know how to use Accordion Component in ReactJS MDBootstrap. Accordion Component is used to display a section of custom content.

Syntax:

<MDBAccordion>
    <MDBAccordionItem>
        Content
    </MDBAccordionItem>
</MDBAccordion>

Creating React Application And Installing Module:

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Step 3: Install ReactJS MDBootstrap in your given directory.

npm i mdb-ui-kit
npm i mdb-react-ui-kit

Step 4: Import the element to be used in the project.

import { MDBAccordion, MDBAccordionItem } from 'mdb-react-ui-kit'

Project Structure: It will look like the following.

Step to Run Application: Run the application from the root directory of the project, using the following command.

npm start

Example 1: This is the basic example that shows how to use the accordion module

App.js

import React from 'react'; 
import { MDBAccordion, MDBAccordionItem } from 'mdb-react-ui-kit'; 
  
export default function App() { 
  
    return ( 
        <div id='gfg'> 
            <h2>zambiatek</h2> 
            <h4>ReactJS MDBootstrap Accordion Component</h4> 
            <hr /> 
            <MDBAccordion initialActive='gfg1'> 
                <MDBAccordionItem collapseId='gfg1'
                    headerTitle='Accordion no-1'> 
                    <strong>ReactJS MDBootstrap 
                        Accordion Component</strong> 
                </MDBAccordionItem> 
                <MDBAccordionItem collapseId='gfg2'
                    headerTitle='Accordion no-2'> 
                    <strong>ReactJS MDBootstrap 
                        Accordion Component</strong> 
                </MDBAccordionItem> 
                <MDBAccordionItem collapseId='gfg3'
                    headerTitle='Accordion no-3'> 
                    <strong>ReactJS MDBootstrap 
                        Accordion Component</strong> 
                </MDBAccordionItem> 
            </MDBAccordion> 
        </div> 
    ); 
}

Index.css

#gfg{ 
    margin: 40px; 
}

Output:

Example 2: In this example, we have set flush and alwaysOpen types in the accordion module.

App.js

import React from 'react'; 
import { MDBAccordion, MDBAccordionItem } from 'mdb-react-ui-kit'; 
  
export default function App() { 
  
    return ( 
        <div id='gfg'> 
            <h2>zambiatek</h2> 
            <h4>ReactJS MDBootstrap Accordion Component</h4> 
            <hr /> 
            <MDBAccordion flush alwaysOpen initialActive='gfg1'> 
                <MDBAccordionItem collapseId='gfg1'
                    headerTitle='Accordion no-1'> 
                    <strong>ReactJS MDBootstrap Accordion 
                        Component</strong> 
                </MDBAccordionItem> 
                <MDBAccordionItem collapseId='gfg2'
                    headerTitle='Accordion no-2'> 
                    <strong>ReactJS MDBootstrap Accordion 
                        Component</strong> 
                </MDBAccordionItem> 
                <MDBAccordionItem collapseId='gfg3'
                    headerTitle='Accordion no-3'> 
                    <strong>ReactJS MDBootstrap Accordion 
                        Component</strong> 
                </MDBAccordionItem> 
            </MDBAccordion> 
        </div> 
    ); 
}

Output:

Reference: https://mdbootstrap.com/docs/b5/angular/components/accordion/

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!