Loading

Collapse

For all those times you want to hide content but can't be bothered to think of a better way to do it :D Collapsing content down (kinda like jQuery Accordion) is a good way to present information that doesn't need to be present on screen right away or for showing more info on a sidebar menu.


Base


Item 1

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 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

Important Heading

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.

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.


<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



<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

Using the API you can programmatically control the opening and closing

<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>
// open
$('#my-collapse').collapse('open');
// close
$('#my-collapse').collapse('close');
// openAll
$('#my-collapse').collapse('openAll');
// closeAll
$('#my-collapse').collapse('closeAll');