React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to work with React Bootstrap’s accordions in our React components.

Accordion

Accordions let us restrict card components to open only one at a time.

To use it, we can write:

import React from "react";
import Accordion from "react-bootstrap/Accordion";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      <Accordion defaultActiveKey="0">
        <Card>
          <Card.Header>
            <Accordion.Toggle as={Button} variant="link" eventKey="0">
              title 1
            </Accordion.Toggle>
          </Card.Header>
          <Accordion.Collapse eventKey="0">
            <Card.Body>body 1</Card.Body>
          </Accordion.Collapse>
        </Card>
        <Card>
          <Card.Header>
            <Accordion.Toggle as={Button} variant="link" eventKey="1">
              title 2
            </Accordion.Toggle>
          </Card.Header>
          <Accordion.Collapse eventKey="1">
            <Card.Body>body 2</Card.Body>
          </Accordion.Collapse>
        </Card>
      </Accordion>
    </>
  );
}

We imported the Accordion and Card components.

It has the defaultActionKey is the key for the default card.

Accordion.Toggle is the toggle to open the card.

as is the prop to let us specify what component to render the toggle as.

variant is the style that we want to render the toggle as.

eventKey is the key for the given card.

#javascript #programming #technology #web-development #software-development