How it works
The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as
triggers that are mapped to specific elements you toggle. Collapsing an element will animate the
height
from its current value
to 0
. Given how CSS handles animations, you cannot use padding
on a
.G_collapse
element. Instead, use the class as an independent wrapping element.
Example
Click the buttons below to show and hide another element via class changes:
.G_collapse
hides content- Transition is done by Javascript
.G_collapse.isOpen
shows content
You can use a link or a button with the
data-collapse-toggle
attribute and set attribute value to id
of the
collapse element .
e.g. data-collapse-toggle="#collapseId"
Basic example
Click the accordions below to expand/collapse the accordion content.
<button class="btn btn-primary" data-collapse-toggle="#this"> Collapse</button>
<div id="this" class="G_Collapse">
<!-- Content Here -->
</div>
<button class="btn btn-primary" data-collapse-toggle="#this"> Control 1</button>
<button class="btn btn-primary" data-collapse-toggle="#this"> Control 2</button>
<div id="this" class="G_Collapse">
<!-- Content Here -->
</div>
<button class="btn btn-primary" data-collapse-toggle="#this1"> Control 1</button>
<button class="btn btn-secondary" data-collapse-toggle="#this2"> Control 2</button>
<button class="btn btn-light" data-collapse-toggle="#this1,#this2"> Control Both</button>
<div id="this2" class="G_Collapse">
<!-- Content Here -->
</div>
<div id="this2" class="G_Collapse">
<!-- Content Here -->
</div>