Collapsing content

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 collapseplugin 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...