Accordions

Effectively organize your content

[accordion sync="true"]
Nullam malesuada erat ut turpis
Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh.
Sed egestas ante et vulputate
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.
Morbi interdum mollis sapien
Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna.
Fusce accumsan mollis eros
Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est. Nunc sem lacus, accumsan quis, faucibus non, congue vel.
[/accordion]

Get The Code

[[accordion sync="true"]

<div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle " data-toggle="collapse" data-parent="#" href="#accordion_item_6ae29ff110ae6" ><i class="toggle-icon icon-chevron-down"></i><span>Item #1</span></a></div><div id="accordion_item_6ae29ff110ae6" class="accordion-body collapse in"><div class="accordion-inner" >
Content...
</div></div></div>

<div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle closed" data-toggle="collapse" data-parent="#" href="#accordion_item_6ae29ff110ae9" ><i class="toggle-icon icon-chevron-down"></i><span>Item #2</span></a></div><div id="accordion_item_6ae29ff110ae9" class="accordion-body collapse "><div class="accordion-inner" >
Content...
</div></div></div>

[/accordion]]

Customization Options

  • sync – whether to keep only one item open at a time
  • title – the title of the accordion item
  • open – whether it's open by default on page load
  • color – the background color of the accordion item
  • border – the border color of the accordion item