Widgets usage example
Home > Widgets usage example

Accordion widget

In accordion widget only one toggle can be opened at time. You may specify which toggle will be opened by default when the page load by adding ‘show’ class to ‘accordion-header’ and ‘accordion-content’ elements of this toggle. You may add unlimited accordion at pages.

Panel 1
Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Nulla a arcu mollis, dictum lacus at, dapibus nunc. Maecenas est dui, rutrum eget justo nec, eleifend imperdiet eros. Nullam tincidunt tincidunt elementum. Vivamus in risus lorem.

Panel 2
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Aliquam quam sem, placerat vel eros vitae, consequat sodales tortor. Donec dignissim dolor non augue egestas luctus. Mauris tristique egestas lectus, a fringilla justo consectetur sed.

Panel 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Nulla a arcu mollis, dictum lacus at, dapibus nunc.

Toggle widget

In toggle widget unlimited amount of toggles can be opened at time. You may specify which toggle will be opened by default when the page load by adding ‘show’ class to ‘accordion-header’ and ‘accordion-content’ elements of this toggle. You may add unlimited toggle at pages.


Panel 1
Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Nulla a arcu mollis, dictum lacus at, dapibus nunc. Maecenas est dui, rutrum eget justo nec, eleifend imperdiet eros. Nullam tincidunt tincidunt elementum. Vivamus in risus lorem.

Panel 2
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Aliquam quam sem, placerat vel eros vitae, consequat sodales tortor. Donec dignissim dolor non augue egestas luctus. Mauris tristique egestas lectus, a fringilla justo consectetur sed.

Panel 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Nulla a arcu mollis, dictum lacus at, dapibus nunc.

Tab widget

Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec vitae ornare sem, eget feugiat justo.

Sed vel est a leo vehicula condimentum ac et mauris. Phasellus fermentum nisi dignissim sem condimentum malesuada. In hac habitasse platea dictumst. Maecenas feugiat ante nibh, nec luctus magna pharetra id. Proin ultricies risus semper nibh iaculis pharetra. Curabitur ullamcorper placerat metus at varius.
Sed vel est a leo vehicula condimentum ac et mauris. Phasellus fermentum nisi dignissim sem condimentum malesuada. In hac habitasse platea dictumst. Maecenas feugiat ante nibh, nec luctus magna pharetra id. Proin ultricies risus semper nibh iaculis pharetra. Curabitur ullamcorper placerat metus at varius.
Nulla nec tellus at dolor accumsan aliquet ut at lorem. In tincidunt magna quis sollicitudin tincidunt. Nulla luctus orci tortor, sit amet consequat metus ultrices in. Sed consequat, nibh bibendum malesuada sodales, lectus mauris elementum justo, quis ornare nunc metus vitae tortor. Proin tristique pretium posuere.

Leave a Reply