HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Collapsibles are useful when you want to hide and show large amount of content
Collapsibles are useful when you want to hide and show large amount of content:
<button data-bs-toggle="collapse" data-bs-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Example Explained
The .collapse
class indicates a collapsible element (a <div> in our example);
this is the content that will be shown or hidden with a click of a button.
To control (show/hide) the collapsible content, add the data-bs-toggle="collapse"
attribute to an <a> or a <button> element.
Then add the data-bs-target="#id"
attribute to
connect the button with the collapsible content (<div id="demo">).
href
attribute instead of the data-bs-target
attribute:
<a href="#demo" data-bs-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
By default, the collapsible content is hidden. However, you can add the .show
class to show the content by default:
<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>
The following example shows a simple accordion by extending the card component.
data-bs-parent
attribute to make
sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.
<div id="accordion">
<div class="card">
<div
class="card-header">
<a class="btn"
data-bs-toggle="collapse" href="#collapseOne">
Collapsible
Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show"
data-bs-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed
btn"
data-bs-toggle="collapse" href="#collapseTwo">
Collapsible
Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse"
data-bs-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed
btn"
data-bs-toggle="collapse" href="#collapseThree">
Collapsible
Group Item #3
</a>
</div>
<div id="collapseThree" class="collapse"
data-bs-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
</div>