Accordions

Use accordions to expand and collapse content areas.

Default Style  Head Code  Body Code

This is the default look of an accordion.

Panel Header 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae est erat. Nulla commodo, nunc et semper ultricies, ex massa rhoncus risus, ut pulvinar mi eros eget erat. Proin dictum, dolor nec accumsan aliquam, ex turpis feugiat augue, nec malesuada nibh purus id tortor. Pellentesque quis finibus augue. Donec auctor ante ligula, ac pellentesque dolor lacinia a. Donec id eros pharetra, pellentesque metus nec, interdum augue. Quisque laoreet, sapien eu consequat blandit, orci leo mattis ex, nec gravida urna lorem ac sapien. Mauris vulputate, urna ac posuere pellentesque, nisl massa tristique nisi, et vehicula velit velit eu nunc. Quisque sem libero, ullamcorper sed pharetra eget, efficitur ut ante. Phasellus venenatis, turpis nec congue auctor, sapien diam consequat eros, porttitor volutpat lorem tellus fringilla augue. Phasellus venenatis ullamcorper augue sed tristique. Sed in augue elit. Mauris at posuere lectus. Donec eleifend mattis dignissim. Vestibulum eleifend massa a elit laoreet consequat. Aenean vitae nisi turpis.

Panel Header 2

Aenean id velit fermentum, ullamcorper sapien quis, feugiat tellus. Morbi rutrum sapien porta ex porttitor, et sodales magna placerat. Aenean ultrices neque ipsum, venenatis commodo ipsum faucibus ac. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ut maximus libero. Sed egestas odio a felis volutpat, nec dictum libero placerat. Sed ac leo sit amet quam pellentesque vehicula. Vestibulum dapibus rhoncus risus id lacinia.

Panel Header 3

Phasellus eros nibh, eleifend a efficitur et, vehicula in lectus. Ut venenatis, augue quis egestas mattis, nunc sapien volutpat nisi, ac vestibulum tellus nibh ac felis. Sed in dolor a urna gravida venenatis non a felis. Nunc tristique sem porttitor tempor elementum. Donec tortor massa, feugiat ac eros a, lobortis condimentum nisl. Maecenas efficitur ipsum a varius laoreet. Duis facilisis dictum consequat.

Light Style

To style an accordion in this manner, add the .light class to the .accordion-custom container.

Panel Header 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae est erat. Nulla commodo, nunc et semper ultricies, ex massa rhoncus risus, ut pulvinar mi eros eget erat. Proin dictum, dolor nec accumsan aliquam, ex turpis feugiat augue, nec malesuada nibh purus id tortor. Pellentesque quis finibus augue. Donec auctor ante ligula, ac pellentesque dolor lacinia a. Donec id eros pharetra, pellentesque metus nec, interdum augue. Quisque laoreet, sapien eu consequat blandit, orci leo mattis ex, nec gravida urna lorem ac sapien. Mauris vulputate, urna ac posuere pellentesque, nisl massa tristique nisi, et vehicula velit velit eu nunc. Quisque sem libero, ullamcorper sed pharetra eget, efficitur ut ante. Phasellus venenatis, turpis nec congue auctor, sapien diam consequat eros, porttitor volutpat lorem tellus fringilla augue. Phasellus venenatis ullamcorper augue sed tristique. Sed in augue elit. Mauris at posuere lectus. Donec eleifend mattis dignissim. Vestibulum eleifend massa a elit laoreet consequat. Aenean vitae nisi turpis.

Panel Header 2

Aenean id velit fermentum, ullamcorper sapien quis, feugiat tellus. Morbi rutrum sapien porta ex porttitor, et sodales magna placerat. Aenean ultrices neque ipsum, venenatis commodo ipsum faucibus ac. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ut maximus libero. Sed egestas odio a felis volutpat, nec dictum libero placerat. Sed ac leo sit amet quam pellentesque vehicula. Vestibulum dapibus rhoncus risus id lacinia.

Panel Header 3

Phasellus eros nibh, eleifend a efficitur et, vehicula in lectus. Ut venenatis, augue quis egestas mattis, nunc sapien volutpat nisi, ac vestibulum tellus nibh ac felis. Sed in dolor a urna gravida venenatis non a felis. Nunc tristique sem porttitor tempor elementum. Donec tortor massa, feugiat ac eros a, lobortis condimentum nisl. Maecenas efficitur ipsum a varius laoreet. Duis facilisis dictum consequat.

Panel Style

To style an accordion in this manner, add the .panel class to the .accordion-custom container.

Panel Header 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae est erat. Nulla commodo, nunc et semper ultricies, ex massa rhoncus risus, ut pulvinar mi eros eget erat. Proin dictum, dolor nec accumsan aliquam, ex turpis feugiat augue, nec malesuada nibh purus id tortor. Pellentesque quis finibus augue. Donec auctor ante ligula, ac pellentesque dolor lacinia a. Donec id eros pharetra, pellentesque metus nec, interdum augue. Quisque laoreet, sapien eu consequat blandit, orci leo mattis ex, nec gravida urna lorem ac sapien. Mauris vulputate, urna ac posuere pellentesque, nisl massa tristique nisi, et vehicula velit velit eu nunc. Quisque sem libero, ullamcorper sed pharetra eget, efficitur ut ante. Phasellus venenatis, turpis nec congue auctor, sapien diam consequat eros, porttitor volutpat lorem tellus fringilla augue. Phasellus venenatis ullamcorper augue sed tristique. Sed in augue elit. Mauris at posuere lectus. Donec eleifend mattis dignissim. Vestibulum eleifend massa a elit laoreet consequat. Aenean vitae nisi turpis.

Panel Header 2

Aenean id velit fermentum, ullamcorper sapien quis, feugiat tellus. Morbi rutrum sapien porta ex porttitor, et sodales magna placerat. Aenean ultrices neque ipsum, venenatis commodo ipsum faucibus ac. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ut maximus libero. Sed egestas odio a felis volutpat, nec dictum libero placerat. Sed ac leo sit amet quam pellentesque vehicula. Vestibulum dapibus rhoncus risus id lacinia.

Panel Header 3

Phasellus eros nibh, eleifend a efficitur et, vehicula in lectus. Ut venenatis, augue quis egestas mattis, nunc sapien volutpat nisi, ac vestibulum tellus nibh ac felis. Sed in dolor a urna gravida venenatis non a felis. Nunc tristique sem porttitor tempor elementum. Donec tortor massa, feugiat ac eros a, lobortis condimentum nisl. Maecenas efficitur ipsum a varius laoreet. Duis facilisis dictum consequat.

Option: First Panel Open By Default  Head Code

This option can be used when you want the first panel to be open by default. Just simply change active: false, to active: 0;.