React bootstrap accordion component example

React bootstrap is a component-based library that provides bootstrap features as react component, Today, We will use an Accordion component for creating an Accordion. The Accordion component allows you to toggle content based on a click event.

You can download the working example of a react-bootstrap accordion component https://github.com/technostuf/react-bootstrap-accordion-example

Create a React application
Install react-bootstrap library
Add code to the file
Run a React application

Create a React application

Create a React app using the below command.

 npx create-react-app react-bootstrap-accordion-example

The above command will create a new folder “react-bootstrap-accordion-example” so you need to move into that folder, use the below command to change the directory.

 cd react-bootstrap-accordion-example

Install react-bootstrap library

After creating react app we need to install react-bootstrap and bootstrap from npm or yarn.

 npm install --save react-bootstrap bootstrap
 OR using yarn
 yarn add react-bootstrap bootstrap

Add code to the file

Create a component file AccordionComponent.js to hold accordion code separate from another component and put the below code into that file.

import React from "react";
import Accordion from 'react-bootstrap/Accordion';

const AccordionComponent = () => {
    return (
        <Accordion defaultActiveKey={['0']} alwaysOpen>
            <Accordion.Item eventKey="0">
                <Accordion.Header>Accordion Item #1</Accordion.Header>
                <Accordion.Body>
                    Non, amet netus curabitur? Maecenas! Labore veniam lobortis cubilia quasi adipisci convallis, placeat rhoncus dictumst! Mattis montes orci! Illum cubilia, dolorum vero, necessitatibus lobortis rhoncus pretium non distinctio! Impedit eius possimus expedita eu auctor convallis magna aperiam maxime, nostrud fames! Curae congue? Sociis platea nam, tenetur natoque harum ex torquent.
                </Accordion.Body>
            </Accordion.Item>
            <Accordion.Item eventKey="1">
                <Accordion.Header>Accordion Item #2</Accordion.Header>
                <Accordion.Body>
                    Quod turpis montes, primis iste do blandit nullam. Mus perferendis, fames reprehenderit architecto praesentium, cumque aute facilisis massa! Consequuntur duis? Nascetur, aut nisl porta, nibh gravida tempore laboris? Culpa, risus placerat pretium netus voluptatum consectetuer pellentesque, dolor scelerisque rutrum, pharetra numquam ridiculus lacus! Porttitor eu wisi incidunt, nibh, mollitia. Bibendum.
                </Accordion.Body>
            </Accordion.Item>
        </Accordion>
    )
}
export default AccordionComponent;

defaultActiveKey – It is the default active key that expands on start.

alwaysOpen: You can make accordion items stay open when another accordion item is opened by using the alwaysOpen prop

Finally, you have to call this AccordionComponent component file into your code, in my case I am adding it to App.js

import 'bootstrap/dist/css/bootstrap.css';
import './App.css';
import AccordionComponent from './AccordionComponent';
function App() {
  return (
    <div className="App">
      <div className='row'>
        <h1>React Accordion Simple - technostuf.com</h1>
        <AccordionComponent />
      </div>
    </div>
  );
}
export default App;

Run a React application

Run the React application using the following command.

 npm start

After compilation, the program opens your browser and runs http://localhost:3000/

Output

You can download the working example of a react-bootstrap accordion component.

https://github.com/technostuf/react-bootstrap-accordion-example