Bootstrap - Accordion

This chapter will discuss about Bootstrap accordion. The accordion collapses elements vertically, shows and hides through class changes. Use the collapse JavaScript plugin to create accordions that collapse vertically.

How it works

In order to collapse, the accordion uses collapse internally. Use .open class to .accordion element to render an expanded accordion.

Basic Example

To expand and collapse the content, click on the accordions below.

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Accordion</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <style>
      </style>
    </head>
    <body>
      <div class="accordion" id="basicAccordion">
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#firstCollapse" aria-expanded="true" aria-controls="firstCollapse">
             Bootstrap - Accordian
            </button>
          </h2>
          <div id="firstCollapse" class="accordion-collapse collapse show" data-bs-parent="#basicAccordion">
            <div class="accordion-body">
              The <b>accordion</b> collapses elements vertically, shown and hidden by class change.
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#secondCollapse" aria-expanded="false" aria-controls="secondCollapse">
              Bootstrap - Buttons
            </button>
          </h2>
          <div id="secondCollapse" class="accordion-collapse collapse" data-bs-parent="#basicAccordion">
            <div class="accordion-body">
              You can use Bootstrap’s custom button styles for actions in forms, dialogs and many more.        
            </div>
          </div>
        </div>
      </div>
    </body>
    </html>

Flush

To render edge-to-edge accordions, use .accordion-flush to remove borders and rounded corners.

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Accordion</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <style>
      </style>
    </head>
    <body>
      <div class="accordion accordion-flush" id="flushAccordion">
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#flushCollapseOne" aria-expanded="false" aria-controls="flushCollapseOne">
              Bootstrap - Accordian
            </button>
          </h2>
          <div id="flushCollapseOne" class="accordion-collapse collapse" data-bs-parent="#flushAccordion">
            <div class="accordion-body">
              The <b>accordion</b> collapses elements vertically, shown and hidden by class change.
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#flushCollapseTwo" aria-expanded="false" aria-controls="flushCollapseTwo">
              Bootstrap - Buttons
            </button>
          </h2>
          <div id="flushCollapseTwo" class="accordion-collapse collapse" data-bs-parent="#flushAccordion">
            <div class="accordion-body">
              You can use Bootstrap’s custom button styles for actions in forms, dialogs and many more.
            </div>
          </div>
        </div>
      </div>
      </div>
    </body>
    </html>

Always open

To keep accordion items open while another item is opened, remove data-bs-parent attribute from each .accordion-collapse.

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Accordion</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <style>
      </style>
    </head>
    <body>
      <div class="accordion" id="alwaysOpenAccordion">
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#firstCollpaseofAlwaysOpen" aria-expanded="true" aria-controls="firstCollpaseofAlwaysOpen">
              Bootstrap - Accordian
            </button>
          </h2>
          <div id="firstCollpaseofAlwaysOpen" class="accordion-collapse collapse show">
            <div class="accordion-body">
              The <b>accordion</b> collapses elements vertically, shown and hidden by class change.
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#secondCollpaseofAlwaysOpen" aria-expanded="false" aria-controls="secondCollpaseofAlwaysOpen">
              Bootstrap - Buttons
            </button>
          </h2>
          <div id="secondCollpaseofAlwaysOpen" class="accordion-collapse collapse">
            <div class="accordion-body">
              The <b>accordion</b> collapses elements vertically, shown and hidden by class change.
            </div>
          </div>
        </div>
      </div>
    </body>
    </html>

Accessibility

See collapse accessibility section for details.

Advertisements