Bootstrap 4 collapse feature is used to show and hide large amount of information.
Step1:
Use either <a>
or <button>
to link collapsible element.
Step2:Add data attribute
data-toggle="collapse"
to either
either <a>
or <button>
and other data attribute data-target="#id-of-collpasible-element"
to only<button>
while as href="#"
is used by <a>
to link collasible element.
Step3: Provide id="id-of-collapse-element"
and .collapse
to the collapsible element .
General Syntax
<button data-toggle="collapse" data-target="#myBlockId">Learn Bootstrap</button>
<div id="myBlockId" class="collapse">
Bootstrap collapse content.
</div>
Source Code
<div class="container my-2">
<button data-toggle="collapse" data-target="#myBlockId">Learn Bootstrap</button>
<div id="myBlockId" class="collapse">
Bootstrap is an HTML, CSS & Javascript-based CSS framework that is widely used during web development.
</div>
</div>
<!--/container-->
Try it yourself
Note: Please keep in mind that by default collapsible element is hidden.To show the hidden content,you have to use
.show
to collapsible elements(<div>
containing class.collapse
).
General Syntax
<button data-toggle="collapse" data-target="#myBlockId"
class="btn btn-success">Click To Show The Effect</button>
<div id="myBlockId" class="collapse show">
Collapsible Content goes here
</div>
Source Code
<div class="container my-2">
<button data-toggle="collapse" data-target="#myBlockId"
class="btn btn-success">Click To Show The Effect</button>
<div id="myBlockId" class="collapse show">
Collapsible Content goes here
</div>
</div>
<!--/container-->
Try it yourself
Note: In the above example,.show
is applied to show the collapsible element content.