How To Use React Bootstrap Accordion With ReactJs

In this article, we will learn how to use react-bootstrap accordion in reactjs.

-A front-end framework called React-Bootstrap was developed with react in mind. Our card components can be opened one at a time with the aid of the accordion component.

–First of all, we have create react application.

–Then create an App.js file inside the src directory.

-After creating the App.js application, Install the required module using the below command

npm install react-bootstrap 
npm install bootstrap

-Write the below code in your file:

import React from "react";
import { Accordion, Card, Button } from "react-bootstrap";

const tabs = [
  { id: 1, label: "Tab A", description: "tab A content" },
  { id: 2, label: "Tab B", description: "tab B content" },
  { id: 3, label: "Tab C", description: "tab C content" }

export default function App() {
  return (
    <div className="App">
      { => (
        <Accordion key={} defaultActiveKey={}>
              <Accordion.Toggle as={Button} variant="link" eventKey={}>
            <Accordion.Collapse eventKey={}>


Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories