Want to display or hide content? Or want to show it by clicking on a link? You can perform these operations using Bootstrap 4 collapse functionality. Here, we will elaborate on collapse as a link.
We will use a link to implement this functionality. To hide the content through a link, you have to use the
href attribute along with data-toggle equals to collapse, i.e.,
<a class="btn btn-primary" data-toggle="collapse" href="#myCollapseExample1" role="button" aria-expanded="false" aria-controls="myCollapseExample1"> // For Link </a>
Note: If you are using an anchor tag or
<div> to show or hide data then, you must add an attribute (role) having a value button
data-toggle="collapse": We use data-toggle collapse to inform the bootstrap framework to perform the call on the required CSS selector. For instance, in the above example, the framework is told to perform the collapsing activity.
data-target="#myCollapseExample": We use data-target to inform bootstrap about which element is going to open after the action is performed. Here, #myCollapseExample is a unique id assigned to this action.
aria-expanded= "false": Define the initial stage of the element. For instance, by default, if you want to set the element to be closed or collapsed then the value will be false. However, if you want to set the element as opened or expanded then the value for aria-expanded will be true.
aria-controls: It contains the address or id of the element which will be collapsed or shown.
Let's illustrate the working of a link as Bootstrap collapse with an example.
<a>tag. All the parameters included in this line are briefly explained above.
href=#myCollapseExampleis the id of the element on which the action would be performed along with
<div>. This will hold the data or the content that has to be shown or hidden from the user. Next, assign the class collapse and define the id of the div as myCollapseExample.
<div>, open another
<div>container having classes
card card-body. This card-body class is used in bootstrap to give a white boxed container for holding the content.
We can use this collapse class to create multiple collapses or accordions. Here, accordion refers to a sequential way of hiding or showing the content.
A practical example of this is the frequently asked questions on Google search. For reference, see the image below:
View all Courses