How to Use Bootstrap Accordion to Hide or Reveal Content

As we were learning about Bootstrap pagination, we agreed massive amounts of data are much harder to read. Dividing it into sections makes it seem more manageable, even if the overall volume stays the same.

Also, there are cases when a large piece of content doesn't need to be read in full. A great example of that would be FAQ pages that a lot of popular websites and applications have. Instead of contacting a customer service manager, an answer can be easily found online.

In such cases, Bootstrap accordions and other collapsibles are often used. Clicking a button makes a Bootstrap panel collapse (hide) or reappear, making it easier to navigate and browse the content of the page.

Bootstrap Accordion: Main Tips

• Knowing the right functions, you can make a Bootstrap panel collapse and reappear. These are called collapsibles.
• Collapsibles are useful for hiding/showing large amounts of content.
• Bootstrap accordion is a component that holds multiple pieces of collapsible data and only displays one at a time.

Creating Collapsibles

Using the Bootstrap collapse class on a <div> container, you can create a container that can collapse (become hidden) or appear again whenever a specified button is clicked.

To specify a button to show or collapse Bootstrap panel, you need to apply data-toggle="collapse" to an <a> or <button> element to specify its function, and then assign the data-target attribute (href for <a> elements) with the collapsible's ID as the value (don't forget it has to be prefixed with a hashtag #):

<button data-target="#demo" data-toggle="collapse">Press me</button>
<div class="collapse" id="demo">
Collapsible content
</div>

Note: in order to make a collapsible show by default, add the show class to it.

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Bootstrap Accordion

The collapsibles of Bootstrap 4 allow us to create a component that is referred to as an accordion in web design. A Bootstrap accordion has multiple collapsible cards, and only one of them can be shown at a time.

The card is displayed or hidden when the appropriate button is clicked. If we choose a different card to view, the first one is hidden automatically. How is this done?

When you use the accordion in Bootstrap, the point is to wrap the cards in an element with an individual ID, and then target this element as the data-parent of the collapsibles by referring to the id. Using this simple addition, you can make your content display more interactively.

Let's see the code example we have below that illustrates the creation of a Bootstrap accordion. Analyze it and then run it on a code editor to see the results:

<!-- data parent of the collapsibles -->
<div id="accordion">
<!-- collapsible cards -->
  <div class="card bg-warning">
    <div class="card-header">
      <a class="card-link" data-toggle="collapse" href="#collapsibleOne" data-parent="#accordion">
        Collapsible card 1
      </a>
    </div>
    <div class="collapse show" id="collapsibleOne">
      <div class="card-footer">
        Collapsible content
      </div>
    </div>
  </div>

  <div class="card bg-warning">
    <div class="card-header">
      <a class="card-link collapsed" data-toggle="collapse" href="#collapsibleTwo" data-parent="#accordion">
        Collapsible card 2
      </a>
    </div>
    <div class="collapse" id="collapsibleTwo">
      <div class="card-footer">
        Collapsible content
      </div>
    </div>
  </div>

  <div class="card bg-warning">
    <div class="card-header">
      <a class="card-link collapsed" data-toggle="collapse" href="#collapsibleThree" data-parent="#accordion">
        Collapsible card 3
      </a>
    </div>
    <div class="collapse" id="collapsibleThree">
      <div class="card-footer">
        Collapsible content
      </div>
    </div>
  </div>

</div>

Bootstrap Accordion: Summary

• Bootstrap collapsibles are used to either hide or show a significant part of content.
• A component that contains multiple collapsible pieces of data but is only able to show one at any given time is called an accordion Bootstrap.