1 Accordion
Accordions are elements used to expand and collapse content that is broken into logical sections, much like tabs. A lightweight (~1kb) jQuery plugin that enables expanding and collapsing content.
1.1 Default Example
Click me to show or hide the content
Accordion content lorem ipsum dolor
Click me to show or hide the content
Accordion content lorem ipsum dolor
Click me to show or hide the content
Accordion content lorem ipsum dolor
Click me to show or hide the content
Accordion content lorem ipsum dolor
Click me to show or hide the content
Accordion content lorem ipsum dolor
<div data-collapse="">
<h3 class="js-collapse soft-half bg-light-grey-1"><span class="icon icon-minus"></span><span class="icon icon-plus"></span> Click me to show or hide the content </h3>
<div class="soft">
Accordion content lorem ipsum dolor
</div>
<h3 class="js-collapse soft-half bg-light-grey-1"><span class="icon icon-minus"></span><span class="icon icon-plus"></span> Click me to show or hide the content </h3>
<div class="soft">
Accordion content lorem ipsum dolor
</div>
<h3 class="js-collapse soft-half bg-light-grey-1"><span class="icon icon-minus"></span><span class="icon icon-plus"></span> Click me to show or hide the content </h3>
<div class="soft">
Accordion content lorem ipsum dolor
</div>
<h3 class="js-collapse soft-half bg-light-grey-1"><span class="icon icon-minus"></span><span class="icon icon-plus"></span> Click me to show or hide the content </h3>
<div class="soft">
Accordion content lorem ipsum dolor
</div>
<h3 class="js-collapse soft-half bg-light-grey-1"><span class="icon icon-minus"></span><span class="icon icon-plus"></span> Click me to show or hide the content</h3>
<div class="soft">
Accordion content lorem ipsum dolor
</div>
</div>1.2 Accordion Example
Click me to show or hide the content
Accordion content lorem ipsum dolor
Click me to show or hide the content
Accordion content lorem ipsum dolor
Click me to show or hide the content
Accordion content lorem ipsum dolor
Click me to show or hide the content
Accordion content lorem ipsum dolor
Click me to show or hide the content
Accordion content lorem ipsum dolor
<div data-collapse="accordion">
<h3 class="js-collapse soft-half bg-light-grey-1"><span class="icon icon-minus"></span><span class="icon icon-plus"></span> Click me to show or hide the content</h3>
<div class="soft">
Accordion content lorem ipsum dolor
</div>
<h3 class="js-collapse soft-half bg-light-grey-1"><span class="icon icon-minus"></span><span class="icon icon-plus"></span> Click me to show or hide the content</h3>
<div class="soft">
Accordion content lorem ipsum dolor
</div>
<h3 class="js-collapse soft-half bg-light-grey-1"><span class="icon icon-minus"></span><span class="icon icon-plus"></span> Click me to show or hide the content</h3>
<div class="soft">
Accordion content lorem ipsum dolor
</div>
<h3 class="js-collapse soft-half bg-light-grey-1"><span class="icon icon-minus"></span><span class="icon icon-plus"></span> Click me to show or hide the content</h3>
<div class="soft">
Accordion content lorem ipsum dolor
</div>
<h3 class="js-collapse soft-half bg-light-grey-1"><span class="icon icon-minus"></span><span class="icon icon-plus"></span> Click me to show or hide the content</h3>
<div class="soft">
Accordion content lorem ipsum dolor
</div>
</div>1.3 Persistence Example
Click me to show or hide the content
Accordion content lorem ipsum dolor
Click me to show or hide the content
Accordion content lorem ipsum dolor
Click me to show or hide the content
Accordion content lorem ipsum dolor
Click me to show or hide the content
Accordion content lorem ipsum dolor
Click me to show or hide the content
Accordion content lorem ipsum dolor
<div data-collapse="persist">
<h3 class="js-collapse soft-half bg-light-grey-1"><span class="icon icon-minus"></span><span class="icon icon-plus"></span> Click me to show or hide the content</h3>
<div class="soft">
Accordion content lorem ipsum dolor
</div>
<h3 class="js-collapse soft-half bg-light-grey-1"><span class="icon icon-minus"></span><span class="icon icon-plus"></span> Click me to show or hide the content</h3>
<div class="soft">
Accordion content lorem ipsum dolor
</div>
<h3 class="js-collapse soft-half bg-light-grey-1"><span class="icon icon-minus"></span><span class="icon icon-plus"></span> Click me to show or hide the content</h3>
<div class="soft">
Accordion content lorem ipsum dolor
</div>
<h3 class="js-collapse soft-half bg-light-grey-1"><span class="icon icon-minus"></span><span class="icon icon-plus"></span> Click me to show or hide the content</h3>
<div class="soft">
Accordion content lorem ipsum dolor
</div>
<h3 class="js-collapse soft-half bg-light-grey-1"><span class="icon icon-minus"></span><span class="icon icon-plus"></span> Click me to show or hide the content</h3>
<div class="soft">
Accordion content lorem ipsum dolor
</div>
</div>