loading...

Bootstrap 4 – 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  >
    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  >
     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"
    >
     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.

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:

  1. We replicate the  Toggle my content button so that it shows above each div containing our content.
  2. We remove the last, hidden, div to keep the example simple.
  3. We replace the data-mycontent="showme" with data-accordion="1" and data-accordion="2" respectively.
  4. We update the toggle button’s data-target attributes to point to the accordion IDs.
  5. 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" >
      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" >
         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" >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </div>
  </div>
</div>

Comments are closed.

loading...