Use Bootstrap Accordion with React
Nov 19, 2020 • 5 Minute Read
Introduction
Accordions can be used to create tabbed elements and hide/show content based on collapsible tabs, followed by their child content elements. React does not have its own set of elements to integrate into the React component. Hence, you need to use some popular and frequently used libraries such as react-bootstrap that provide bootstrap elements for the React app.
Using react-bootstrap, there is an element called <Accordion> that allows you to toggle content based on a click event. This guide will cover the implementation.
Getting Started with react-bootstrap Accordion
React-Bootstrap contains various bootstrap components that can be plugged and played for a React app. The same applies to the accordion; a part of the library can be imported from the library and used in the component.
Before using any of the components, you need to install it using the below NPM command.
npm install react-bootstrap
npm install bootstrap
After installing both of the above libraries, the next step is to import the bootstrap CSS into the root file of the React app, i.e. index.js.
import "bootstrap/dist/css/bootstrap.min.css";
Now you can use any of the react-bootstrap components into your React app.
Integrating Accordion in React Component
After the react-bootstrap configuration, the next step is to extract the accordion component and configure it. You can import the accordion component like this:
import { Accordion } from "react-bootstrap";
The accordion component works on two different elements: toggle elements and collapsible elements.
Toggle Element
To enable the expand operation, you need to have an element to be clicked by the user, and based on the toggle effect, the respective child content will be visible.
For that, there is one element that gets used to implement the toggle below.
<Accordion.Toggle as={Card.Header} eventKey="0">
TAB 1
</Accordion.Toggle>
Where as represents the toggle element's behavior can be anything such as a button, link, or card header.
eventKey identifies each toggle element to expand the respective elements once the user clicks on the header.
Collapsible Element
Once the user clicks on the <Accordion.Toggle> element, respective child content should be expanded and visible into the DOM; hence there is an additional configuration.
To expand, you have used <Accordion.Toggle>. To collapse the same way, there is another element called <Accordion.Collapse>.
<Accordion.Collapse eventKey="0">
<Card.Body>This is first tab body</Card.Body>
</Accordion.Collapse>
One prop attached, eventKey is used to find the DOM's specific component and render the associated child element content with each collapsible element.
Below is the completed code, which shows the complete implementation of the Accordion.
import React, { Component } from "react";
import { Accordion, Card } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
export class Example1 extends Component {
render() {
return (
<>
<div>
<Accordion>
<Card>
<Accordion.Toggle as={Card.Header} eventKey="0">
TAB 1
</Accordion.Toggle>
<Accordion.Collapse eventKey="0">
<Card.Body>This is first tab body</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Accordion.Toggle as={Card.Header} eventKey="1">
TAB 2
</Accordion.Toggle>
<Accordion.Collapse eventKey="1">
<Card.Body>This is second tab body</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
</div>
</>
);
}
}
export default Example1;
In the above example, two collapsible accordions get used and wrapped by the parent element <Accordion>. One collapsible accordion is eventkey=”0” and another is eventkey=”1”. Once any of the accordions get clicked, the matching event key will be identified, and its child content will be visible to the user.
You can configure multiple accordions based on your requirement and set the prop eventKey, which is used to identify the respective collapsible content.
How to Open Any Accordion by Default
It may be possible that you need to open any of the accordions by default once the page renders, so there is an additional property called defaultActiveKey.
You can define the default key of the desired collapsible accordion to be visible, as given below.
<Accordion defaultActiveKey="2">
...
</Accordion>
Using the above configuration, the third accordion will be expanded by default because you have defined the default active key to 2.
Conclusion
The accordion is the best choice when the user interface should be collapsed and able to utilize the web page space to expand the content when required.
Apart from react-bootstrap, you can try accordion from other third-party libraries such as material-ui based on the UI specification and requirement to effectively show the required content.
