The visibility of elements can be toggled by applying the collapse class in conjunction with the data-toggle="collapse" attribute. Applying the collapse class will simply set the target element's display property to none. An element can be animated to become visible again using an anchor whose data-toggle attribute is set to collapse and whose href attribute points to the collapsed element using a jQuery selector. Consider this example:

<a href="#my-content" data-toggle="collapse">Toggle my content</a>
<div id="my-content" class="collapse bg-secondary text-light">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>

Internally, Bootstrap achieves this using the collapse plugin defined in js/src/collapse.js (note that you do not need to manually include this file; its contents already come bundled as part of bootstrap.min.js).

Instead of specifying the target using the href attribute, one can use the data-target attribute along with a jQuery selector. This allows us to use other types of controls—for example buttons—to toggle the visibility of an element. Take this example into consideration:

<button class="btn btn-success" data-target="#my-content" data-toggle="collapse">
    Toggle my content
</button>
<div id="my-content" class="collapse bg-secondary text-light">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>

Since we are using jQuery selectors to denote which element's visibility to toggle, we are not restricted to just using an element's ID. Instead, we can use its class name or a special data-* attribute. This in turn allows for the toggling of both single or multiple elements, depending on the type and complexity of the selector. Consider the following example:

<button class="btn btn-success" data-target="[data-mycontent='showme']" data-toggle="collapse">
    Toggle my content
</button>
<div
    data-mycontent="showme"
    class="collapse bg-secondary text-light m-1">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<div
    data-mycontent="showme"
    class="collapse bg-secondary text-light m-1">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<div
    data-mycontent="hideme"
    class="collapse bg-secondary text-light m-1">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>

In this example, what we have done is to merely create three div elements, populate them with content, and assign our own data-mycontent attribute. We then used the [data-mycontent='showme'] selector to select any elements whose data-mycontent attribute was assigned the showme value. This resulted in the visibility of the first two elements being toggled once the Toggle my content button was pressed.