BS4 Collapse
Basic Collapsible
Collapsibles come very handy when you wish to display and conceal a lot of content:
===== BUTTON MUKAVU ====
Example
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Example Explained
A collapsible element, represented by a <div> in our example, is indicated by the .collapse class; this is the content that may be revealed or concealed with a button click.
You can add the data-toggle=”collapse” property to a <a> or <button> element to manipulate (show/hide) the collapsible content. The button will then be connected to the collapsible content (<div id=”demo”>) by adding the data-target=”#id” property.
Note: The href attribute can be used for <a> elements in place of the data-target attribute:
Example
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
The collapsible content is hidden by default. But if you want to display the content by default, you can add the .show class:
Example
<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>
Accordion
In the example below, the card component is extended to create a basic accordion.
Note: Make sure that when one of the collapsible items is displayed, all collapsible elements under the designated parent will be closed by using the data-parent attribute.
Example
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body">
Lorem ipsum..
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum..
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
Collapsible Group Item #3
</a>
</div>
<div id="collapseThree" class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum..
</div>
</div>
</div>
</div>
