How to Create Bootstrap 5 Collapse?

The name collapse is generic term used for showcasing elements that can be shown or hidden on mouse click. Accordion, spoiler and toggles are good examples of collapse component. It uses JavaScript to show or hide the content when clicked on the element. In this tutorial let us explore more on adding collapse component to your Bootstrap site. Bootstrap 5 introduced a new accordion component, therefore do not get confused with these two.

Bootstrap 5 Collapse Tutorial

1. Introduction to Bootstrap collapse
2. Creating collapse with href attribute
3. Collapse with data-toogle
4. Multiple target collapse
5. Accordion collapse
6. Collapsible content body

1. Introduction to Collapse

The collapse component has two elements:

• Base element to show or hide the collapse.
• Actual content inside the collapsed container.

It uses the following three CSS classes:

• “.collapse” is used for hiding the content.
• “.collapsing” is used to apply transition effect.
• “.collapse.show” is used to show the content.

Here we will discuss creating three types of collapse – using href attribute, using data-toggle and accordion style.

2. Collapse with Href Attribute

In this case anchor tag is used with button classes as a trigger. It should have “data-toggle” attribute with the value as “collapse“. The href attribute should have an unique ID. The “aria-expanded” attribute is set as “false” to ensure the content is hidden on the initial page load.

After the collapse trigger, the actual content should be added with a separate <div> tag identified with the same ID of the href attribute. You should also add “.collapse” class to the div tag. You can add any type of content within the div tags. In this example we have used a card block with text.

The complete code for the collapse with href attribute is shown below:

<p>
<a class="btn btn-primary" data-toggle="collapse" href="#linkcollapse" aria-expanded="false" aria-controls="Collapse">
Link with Href
</a>
</p>
<div class="collapse" id="linkcollapse">
<div class="card card-block">
Here is the content for block which will be shown when the button is clicked. This uses the link with href attribute for collapsing.
</div>
</div>

The result should look like a button and the collapsable content should be shown when you click on the button.

You should always use the code inside the body section of Bootstrap starter template which includes the required CSS and JavaScript framework.

3. Collapse with data-toggle

Instead of href attribute you can use “data-toggle=collapse” with button element to create a trigger as shown below:

<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#buttoncollapse" aria-expanded="false" aria-controls="Collapse">
Button with data-target
</button>
</p>
<div class="collapse" id="buttoncollapse">
<div class="card card-block">
Here is the content for block which will be shown when the button. This uses button with data-target attribute for collapsing.
</div>
</div>

The result of the above code will look like below similar to the href example.

4. Multiple Taget Collapse

The above example has single collapse component toggled using a button. You can also toggle multiple collapse components using single element. For example, below code has three buttons. First and second buttons are used to toggle first and second collapse respectively. The third button is used to toggle both first and second collapses together.

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multipleCollapse1" aria-expanded="false" aria-controls="multipleCollapse1">Toggle First Element</a>
  <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#multipleCollapse2" aria-expanded="false" aria-controls="multipleCollapse2">Toggle Second Element</button>
  <button class="btn btn-success" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multipleCollapse1 multipleCollapse2">Toggle Both Elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multipleCollapse1">
      <div class="card card-body">
            Here is the content for block which will be shown when the first button is clicked. This uses button with data-target attribute for collapsing.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multipleCollapse2">
      <div class="card card-body">
            Here is the content for block which will be shown when the second button is clicked. This uses button with data-target attribute for collapsing.
      </div>
    </div>
  </div>
</div>

It will look something like below on your site:

5. Accordion Collapse

The final and most popular variation is to create accordion using collapse component. Below is the accordion code having three sliders – the first one has card group layout and the remaining two have card heading with some text content.

<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="Firstheading">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
          Heading 1
        </a>
      </h5>
    </div>

    <div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="Firstheading">
<div style="margin:20px;">
        <div class="card-group">
  <div class="card">
    <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 1">
    <div class="card-body">
      <h4 class="card-title">Card Title</h4>
      <p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Here is a footer</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 2">
    <div class="card-body">
      <h4 class="card-title">Card Title</h4>
      <p class="card-text">Here is a shorter description of the card.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Here is a footer</small>
    </div>
  </div>
</div>
</div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="secondheading">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
          Heading 2
        </a>
      </h5>
    </div>
    <div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="secondheading">
      <div class="card-body">
        Here is the content for the second section.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingThree">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
          Heading 3
        </a>
      </h5>
    </div>
    <div id="collapse3" class="collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="card-body">
        Here is the content for the third section.
      </div>
    </div>
  </div>
</div>

It is long code block mainly due to the card group section for the first collapse. Let us go through all the elements part of this code:

5.1. Accordion

• The accordion is wrapped inside div tags with a unique ID (#accordion in this example). And the role attribute should be used as tablist.
• Totally three collapsible sections are used and each section should start with its own div. We have used “.card” class to each of these sections.
• Each card section is made up of a heading and a collapsible content.

5.2. Heading

• Class “.card-header” is used for heading along with a unique id (Firstheading) and the role attribute with a value as tab.
• Inside the header, add heading tags, we have used h5 in this case.
• Again, inside the heading tags, add anchor link with the following class/attributes:
  • Add “.collapsed” class for accordion.
  • Add data-toggle attribute with the value as collapse.
  • Add data-parent attribute with the same ID used for the first <div> (#accordion in this case).
  • Href attribute should have a ID of the collapsible content which is “#collapse1“.
  • Set aria-expanded to true so that the section will be opened when the page loads (you should set this to false for second and further sections so that they are closed when loading).
  • Set aria-controls attribute value with the same ID of the Href attribute value (collapse1).

6. Collapsible Content Body

• Open a new <div> tag after the header with a the same ID of corresponding to the header href attribute value (collapse1).
• Add the class “.collapse show” to show the content open. You should not use “.show” for the remaining sections as they should be closed.
• Add the role as tabpanel and assign aria-labelledby attribute with the same value as card header id (Firstheading).
• Now you can add whatever the content you want to add. In this case we have opened up another div and added card group for the first section and card blocks for the remaining two sections.

Follow the same process for other two sections and the final accordion should look something like below:

---

---