Base
Item 1
Item 2
I look active on load.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Item 3
<div id="my-collapse" data-component="collapse">
<h4><a href="#box-1" class="collapse-toggle">...</a></h4>
<div class="collapse-box hide" id="box-1">...</div>
<h4><a href="#box-2" class="collapse-toggle">...</a></h4>
<div class="collapse-box" id="box-2">...</div>
<h4><a href="#box-3" class="collapse-toggle">...</a></h4>
<div class="collapse-box hide" id="box-3">...</div>
</div>
Navigation Example
Here you can see a list of items forming a navigation menu, with a nested list which acts as a collapsable element
<ul>
<li><a href="#">...</a></li>
<li data-component="collapse">
<a href="#toggle-box" class="collapse-toggle">
Toggle
<span class="caret down"></span>
</a>
<ul id="toggle-box" class="collapse-box">
<li><a href="#">...</a></li>
</ul>
</li>
<li><a href="#">...</a></li>
</ul>
Settings
Settings are pretty straightforward: you can toggle, denote active element, turn animation on and off, and more.
toggle
- Type: boolean
- Default: true
active
- Type: string or boolean
- Default: false
toggleClass
- Type: string
- Default: 'collapse-toggle'
Sets a class of a collapsable object.
boxClass
- Type: string
- Default: 'collapse-box'
Sets a class for collapsable object's content
animation
- Type: boolean
- Default: true
Turns animation on and off.
Callbacks
open
$('#my-collapse').on('open.collapse', function()
{
// do something...
});
opened
$('#my-collapse').on('opened.collapse', function()
{
// do something...
});
close
$('#my-collapse').on('close.collapse', function()
{
// do something...
});
closed
$('#my-collapse').on('closed.collapse', function()
{
// do something...
});
API
We love APIs, and for interactive elements such as collapsable elements we offer ways to programmatically open and close individual elements, or all at once.
<button onclick="$('#my-collapse-api').collapse('open', '#box-2');">Open</button>
<button onclick="$('#my-collapse-api').collapse('close', '#box-2');">Close</button>
<button onclick="$('#my-collapse-api').collapse('openAll');">Open All</button>
<button onclick="$('#my-collapse-api').collapse('closeAll');">Close All</button>
<div id="my-collapse-api" data-component="collapse">
<h4><a href="#box-1" class="collapse-toggle">...</a></h4>
<div class="collapse-box hide" id="box-1">...</div>
<h4><a href="#box-2" class="collapse-toggle">...</a></h4>
<div class="collapse-box hide" id="box-2">...</div>
<h4><a href="#box-3" class="collapse-toggle">...</a></h4>
<div class="collapse-box hide" id="box-3">...</div>
</div>
open
$('#my-collapse').collapse('open');
close
$('#my-collapse').collapse('close');
openAll
$('#my-collapse').collapse('openAll');
closeAll
$('#my-collapse').collapse('closeAll');