How to use Bootstrap 4 collapse as a link

Overview

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., data-toggle="collapse"

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 (role="button").

Attributes

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

Code

Let's illustrate the working of a link as Bootstrap collapse with an example.

Explanation

• Line 1–5: It contains the basic metadata information that varies from editor to editor.
• Line 8–12: We include bootstrap 4 framework in the program.

• Line 15: Define and initiate the <a> tag. All the parameters included in this line are briefly explained above. href=#myCollapseExample is the id of the element on which the action would be performed along with role= "button".

• Line 16: Initiate the <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.
• Line 17: Inside the <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.

Collapses vs Accordions

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: