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.
1. Accordions
Now that we know how we can toggle the visibility of elements, we can go ahead and create our very own accordion. To this end, let’s reuse the example from the previous subsection, but make the following adjustments:
- We replicate the Toggle my content button so that it shows above each div containing our content.
- We remove the last, hidden, div to keep the example simple.
- We replace the data-mycontent=”showme” with data-accordion=”1″ and data-accordion=”2″ respectively.
- We update the toggle button’s data-target attributes to point to the accordion IDs.
- Assign to give the first content div the bg-primary class to allow us to differentiate between the two content areas.
<div>
<div>
<button
class=”btn btn-success”
data-target=”[data-accordion=’1′]”
data-toggle=”collapse”>
Toggle my content 1
</button>
<div data-accordion=”1″ class=”collapse bg-primary text-light m-1″>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
</div>
<div>
<button
class=”btn btn-success”
data-target=”[data-accordion=’2′]”
data-toggle=”collapse”>
Toggle my content 2 </button>
<div data-accordion=”2″ class=”collapse bg-secondary text-light m-1″>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
</div>
</div>
Running this example, you will now see that by clicking on each button, the primary and secondary content will become visible or invisible (refer to the following figure):
Figure 9.6: Two content areas forming the foundation of our accordion
This, however, is not the behavior that we would expect from an accordion, as an accordion ever only shows one content area at a time. To this end, let’s continue working on our example. First, we should apply the show class alongside the collapse class of your primary content area. This merely ensures that the content is visible. Therefore, when first loading the page, the primary content area will be visible, while the secondary content area will be invisible.
Next, we want the primary content area to become invisible when the secondary content area is toggled, and vice versa. To this end, what we must do is make use of the data- children and data-parent attributes. As their names imply, these two attributes are used to denote the parent of a given element and the children within a given element. Since both attributes accept jQuery selectors, we can denote the parent of both the primary and secondary content area using data-parent=”.accordion-parent”. Of course, in order for this to work, we must assign the accordion-parent class name to the accordion root:
<div class=”accordion-parent”>
<div>
<button
data-parent=”.accordion-parent”
class=”btn btn-success”
data-target=”[data-accordion=’1′]”
data-toggle=”collapse”>
Toggle my content 1
</button>
<div data-accordion=”1″ class=”collapse show bg-primary text- light m-1″>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
</div>
<div>
<button
data-parent=”.accordion-parent”
class=”btn btn-success”
data-target=”[data-accordion=’2′]”
data-toggle=”collapse”>
Toggle my content 2
</button>
<div data-accordion=”2″ class=”collapse bg-secondary text-light m- 1″>
Lorem ipsum dolor sit amet, consectetur adipiscing elit </div>
</div>
</div>
Last but not least, we must denote the children by adding data-children=”[data- parent]” to the accordion root:
<div class=”accordion-parent” data-children=”.accordion-child”>
<div class=”accordion-child”>
<button
data-parent=”.accordion-parent”
class=”btn btn-success”
data-target=”[data-accordion=’1′]”
data-toggle=”collapse”>
Toggle my content 1
</button>
<div data-accordion=”1″ class=”collapse show bg-primary text-light m-1″>
Lorem ipsum dolor sit amet, consectetur adipiscing elit </div>
</div>
<div class=”accordion-child”>
<button
data-parent=”.accordion-parent”
class=”btn btn-success”
data-target=”[data-accordion=’2′]”
data-toggle=”collapse”>
Toggle my content 2
</button>
<div data-accordion=”2″ class=”collapse bg-secondary text-light m- 1″>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
</div>
</div>
Source: Jakobus Benjamin, Marah Jason (2018), Mastering Bootstrap 4: Master the latest version of Bootstrap 4 to build highly customized responsive web apps, Packt Publishing; 2nd Revised edition.