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">
{tabs.map(tab => (
<Accordion key={tab.id} defaultActiveKey={tab.id}>
<Card>
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey={tab.id}>
{tab.label}
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey={tab.id}>
<Card.Body>{tab.description}</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
))}
</div>
);
}
Output:
