React Bootstrap Accordion

Use an accordion when a page has more sections than a reader wants to see at once, such as a FAQ or a long help page. Only the headers show, and a click on a header opens its section.

In AdminKit the accordion is four small React components: Accordion, AccordionItem, AccordionHeader and AccordionBody. They render Bootstrap's accordion markup and open items from React state, without Bootstrap's JavaScript or react-bootstrap. They are part of the PRO version of AdminKit for React.

The body slides open with the same height transition as Collapse, which the accordion is built on.

ExampleCopy Anchor Link

Give each AccordionItem an eventKey. To start with one item open, pass its key to defaultActiveKey. Opening another item then closes it.

import {
  Accordion,
  AccordionBody,
  AccordionHeader,
  AccordionItem,
} from "@/components/bootstrap/accordion";

export function ShippingFaq() {
  return (
    <Accordion defaultActiveKey="shipping">
      <AccordionItem eventKey="shipping">
        <AccordionHeader>When do orders ship?</AccordionHeader>
        <AccordionBody>Orders ship within two business days.</AccordionBody>
      </AccordionItem>
      <AccordionItem eventKey="returns">
        <AccordionHeader>Can I return an order?</AccordionHeader>
        <AccordionBody>Return any order within 30 days for a full refund.</AccordionBody>
      </AccordionItem>
      <AccordionItem eventKey="payment">
        <AccordionHeader>Which payment methods do you accept?</AccordionHeader>
        <AccordionBody>Credit cards, PayPal and bank transfer.</AccordionBody>
      </AccordionItem>
    </Accordion>
  );
}

PropsCopy Anchor Link

Other props of Accordion, such as className and id, go to the .accordion element. All four components are in src/components/bootstrap/accordion.tsx.

• AccordionItem takes a required eventKey (string), unique in its accordion. Its other props go to .accordion-item.
• AccordionHeader takes as for the heading around the button ("h2" to "h6", "h2" by default), className for that heading, and children for the button text.
• AccordionBody passes its props, className included, to .accordion-body, not to the collapsing wrapper around it.

Accordion keeps the open items to itself. After the first render, no prop can open an item from outside. If you want to open a panel from your own state, use Collapse instead. The parts throw an error when they are not inside an Accordion.

FlushCopy Anchor Link

Inside a card, you may want the accordion to sit edge to edge. className="accordion-flush" removes the outer borders and the rounded corners.

<Accordion className="accordion-flush">
  <AccordionItem eventKey="account">
    <AccordionHeader>Account</AccordionHeader>
    <AccordionBody>Change your name, email and password.</AccordionBody>
  </AccordionItem>
  <AccordionItem eventKey="billing">
    <AccordionHeader>Billing</AccordionHeader>
    <AccordionBody>Update your payment method and download invoices.</AccordionBody>
  </AccordionItem>
</Accordion>

Always openCopy Anchor Link

Sometimes readers want to compare two sections side by side. With alwaysOpen, opening an item leaves the others as they are. To open several items at the start, pass a list of keys to defaultActiveKey.

<Accordion alwaysOpen defaultActiveKey={["profile", "notifications"]}>
  <AccordionItem eventKey="profile">
    <AccordionHeader>Profile</AccordionHeader>
    <AccordionBody>Your photo and display name.</AccordionBody>
  </AccordionItem>
  <AccordionItem eventKey="notifications">
    <AccordionHeader>Notifications</AccordionHeader>
    <AccordionBody>Choose which emails you receive.</AccordionBody>
  </AccordionItem>
</Accordion>

AccessibilityCopy Anchor Link

• Each header is a <button> in a heading, with aria-expanded and aria-controls pointing at the body. Accordion generates the body ids with useId, so two accordions on a page never share one.
• Pick the heading level that fits the page outline with as, for example as="h3" under an h2.
• The headers are plain buttons: Tab moves between them, Enter and Space open and close an item.
• A closed body has .collapse (display: none), so its content is out of the tab order and hidden from screen readers.

RelatedCopy Anchor Link

• Next.js Bootstrap accordion: the same component in AdminKit for Next.js
• Bootstrap 5 accordion: the accordion of the HTML version
• Collapse: one panel that shows and hides from your own state
• General UI demo: a card accordion built with Collapse