Bootstrap4 Collapse

Bootstrap4 Collapse allows for easy toggling of content visibility.

Example

<button data-toggle="collapse" data-target="#demo">Collapse</button>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

Example Explanation

The .collapse class is used to designate a collapsible element (the <div> in the example); clicking the button will toggle its visibility between hidden and shown.

To control the hiding and showing of content, add the data-toggle="collapse" attribute to either an <a> or <button> element. The data-target="#id" attribute corresponds to the collapsible content (<div id="demo">).

Note: On an <a> element, you can use the href attribute instead of data-target:

Example

<a href="#demo" data-toggle="collapse">Collapsible</a>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

By default, the collapsible content is hidden. You can add the .show class to make the content visible by default:

Example

<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>

The following example demonstrates a simple accordion by extending the card component.

Note: Use the data-parent attribute to ensure that all collapsible elements are within a specified parent element, allowing only one collapsible item to be shown at a time while others are hidden.

Example

<div id="accordion">
<div class="card">
  <div class="card-header">
    <a class="card-link" data-toggle="collapse" href="#collapseOne">
      Option One
    </a>
  </div>
  <div id="collapseOne" class="collapse show" data-parent="#accordion">
    <div class="card-body">
      #1 Content: tutorialpro.org -- Learning is not just about technology, it's about dreams!!!
    </div>
  </div>
</div>
<div class="card">
  <div class="card-header">
    <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
    Option Two
  </a>
  </div>
  <div id="collapseTwo" class="collapse" data-parent="#accordion">
    <div class="card-body">
      #2 Content: tutorialpro.org -- Learning is not just about technology, it's about dreams!!!
    </div>
  </div>
</div>
<div class="card">
  <div class="card-header">
    <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
      Option Three
    </a>
  </div>
  <div id="collapseThree" class="collapse" data-parent="#accordion">
    <div class="card-body">
      #3 Content: tutorialpro.org -- Learning is not just about technology, it's about dreams!!!
    </div>
  </div>
</div>
</div>