The collapse plugin is used to hide or show another element or the content contained by those elements. This is used specifically to reduce the space taken by the content. For instance, it could be used for frequently asked questions (FAQs) or the reviews posted by customers.
This functionality is implemented by either using a link or a button. In this shot, we'll discuss collapse as a button.
To hide the content through a button, we have to use the data-target
attribute along with data-toggle
equals to collapse.
<buttonclass="btn btn-success"type="button"data-toggle="collapse"data-target="#myCollapseExample"aria-expanded="false"aria-controls="myCollapseExample">//Button_Name_Here</button>
data-toggle="collapse"
: Data toggle is basically used to inform the bootstrap to perform which functionality or activity. For instance, here it is telling that collapsing activity should be performed.data-target="#myCollapse"
: Data target is used to inform bootstrap about which element is going to open after the action is performed.aria-expanded= "false"
: This is used to basically define the initial stage of the element. For example, by default, if we want to set the element to be closed or collapsed, then the value will be false. However, if we want to set the element as opened or expanded, the value for aria-expanded
will be true
.aria-controls
: This contains the address or the ID of the element which will be collapsed or shown.Next, let's have a demo code to show the working of a button as collapse:
<p>
element and define the <a>
tag. href=#myCollapse
is the ID of the element on which the action will be performed along with role= "button"
.<button>
element with the above-described attributes.<div>
tag. It will contain the content that has to be shown or hidden upon action. We assign the class, collapse
, and define the ID of <div>
to myCollapse
.