Explain Bootstrap’s collapsing elements
In this article, we will see how can we create a collapsing element using Bootstrap classes and also see their different properties, along with understanding their implementation through the example.
Bootstrap Collapsing Element:
Working of Bootstrap Collapsing Element:
Bootstrap collapse is used to show or hide content. Buttons or anchors are used to trigger the request and they are mapped to the specific element that needs to be collapsed. In Bootstrap, the collapsing element animates the height of the element from its current height to 0.
The classes used for collapsing element:
- .collapse: This class hides the content.
- .collapsing: This class is used during the transition.
- .collapse-show: This class shows the content.
Please refer to the Bootstrap 4 Collapse article for further details.
Generally, the collapsing element is done using the button. Here, we will use a button to show the working of the collapsible element.
<button type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample">Button </button>
The two attributes are used with the button, are given below:
- data-bs-target: This attribute holds the id of the element that is needed to be hidden or shown on a button click.
- data-bs-toggle: This attribute is always set to “collapse”.
From the below example, we can see a button is given with both the attributes “data-bs-toggle” set to “collapse” and “data-bs-target” with the value set to “#collapseExample” i.e. the id of the div element that should be made collapsible. The “div” is given the class “collapse” to make it collapsible.
Example: This example describes the collapsing element.
Horizontal Collapsing Element:
We can also make horizontal collapsing elements. Here, instead of vertical the element will collapse horizontally. To make a horizontal collapsing element, we need to add the class “collapse-horizontal” to the element that is to be collapsed. We need the width of the child element to be mentioned either using the inline CSS or using width-utilities only.
<div class="collapse collapse-horizontal"></div>
Example: This example describes the Horizontal Collapsing Element.
We can also make a single button to control multiple collapsible elements at once. The idea is very simple, here we have to make multiple-element with the same class name and add that class name to the “data-bs-target”.
Note: We use the class name here not id because id is unique to every element in HTML.
<div class="collapse multi-collapse"></div>
Example: This example describes the Multiple Collapsible Element.
In the above code, the “data-bs-target” attribute of the button is given the value of the class name “.collapse” and thus the button now works on both the collapsible element at once.
Note: We can also make the above elements show content individually by assigning them to separate buttons using their “id”.
- Google Chrome
- Microsoft Edge
- Internet Explorer 10+