Bootstrap - Collpase

This chapter will discuss about Bootstrap collpase. Collasping is toggling the content visibility. This is achieved using bootstrap's javaScript plugins and some classes.

  • The JavaScript plugin for collapse is used to display and hide information. Buttons or anchors act as triggers when mapped to specific elements to toggle.

  • When an element is collapsed, the height will animate from its current value to zero. Due to how CSS handles animations, padding cannot be applied to a .collapse element.

Basic example

A basic collapse works as in the following example. Buttons when clicked show and hide another element via class changes:

  • Class .collapse hides content.

  • Class .collapsing helps transitions.

  • Classes .collapse.show displays content.

Using a button with the data-bs-target attribute is a good idea. You can also use an <a> link with a role="button" (although this is not advised from a semantic perspective). data-bs-toggle="collapse" is necessary in both situations.

Example

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap plugin - Collapse</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>
    </head>
    <body>
      <p>
        <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
          Collapse using link
        </a>
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
          Collapse using button
        </button>
      </p>
      <div class="collapse" id="collapseExample">
        <div class="card card-body">
          The collapse JavaScript plugin used to display and hide content.
        </div>
      </div>
    </body>
    </html>

Horizontal

Horizontal collapsing is supported by collapse plugin. Set a width on the immediate child element and add the .collapse-horizontal modifier class to transition the width rather than the height. You can further customize by using width utilities, create your own unique Sass, or use inline styles.

Example

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

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap plugin - Collapse</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>
  </head>
  <body>
    <p>
      <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
        Collapse With Toggle Width 
      </button>
    </p>
    <div style="min-height: 120px;">
      <div class="collapse collapse-horizontal" id="collapseWidthExample">
        <div class="card card-body" style="width: 300px;">
          The collapse plugin supports horizontal collapsing.
        </div>
      </div>
    </div>
  </body>
  </html>

Multiple toggles and targets

Multiple targets can be used to toggle multiple elements assingning them to a common group and using a single <button> or <a> tag to hide/show. Following points helps us understand this better:

  • By assigning the common class in the data-bs-target attribute of the <button> or <a>, an element can reference multiple elements to show and hide them.

  • Multiple <button> or <a> elements can show and hide the same element if they each reference it with their data-bs-target or href attribute.

Example

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap plugin - Collapse</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>
    </head>
    <body>
      <p>
        <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Collapse First Item</a>
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Collapse Second Item</button>
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Collapse Both Elements</button>
      </p>
      <div class="row">
        <div class="col">
          <div class="collapse multi-collapse" id="multiCollapseExample1">
            <div class="card card-body">
              Example of multiple collpase and targets.
            </div>
          </div>
        </div>
        <div class="col">
          <div class="collapse multi-collapse" id="multiCollapseExample2">
            <div class="card card-body">
              Example of multiple collapse and targets.
            </div>
          </div>
        </div>
      </div>
    </body>
    </html>

Accessibility

  • Use aria-expanded to communicate collapsible element's status to assistive technology. Set aria-expanded="false" for closed collapsible elements and aria-expanded="true" for open ones.

  • The plugin toggles the attribute on the control based on whether the collapsible element is open or closed. Apply role="button" if the control element's HTML element is not a button.

  • Modern screen readers and similar assistive technologies make use of the data-bs-target attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.

Advertisements