• Since the Drag & Drop is not available in the Lite version, sortable accordion will use buttons to move list items.
  • The JavaScript Accordion is in Beta Release

Accordion Unit Test

Basic Accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur accumsan nulla id volutpat tempor. Mauris sagittis risus eget vestibulum mollis. Morbi non leo scelerisque nunc fringilla porta. Sed imperdiet odio id vehicula pellentesque. Nam tincidunt dignissim nibh et fringilla. Quisque tempus adipiscing ipsum quis convallis. Pellentesque pretium augue eu lacinia sodales. Nulla ornare nulla ultricies, laoreet metus eget, sagittis elit. Fusce posuere ornare sapien vitae lacinia.

Morbi vel bibendum leo. Suspendisse vestibulum, lacus et hendrerit luctus, tellus lacus gravida purus, luctus tincidunt mauris ipsum consectetur libero. Curabitur eleifend posuere laoreet. Nunc pharetra dapibus vestibulum. Praesent sollicitudin interdum mi vitae interdum. Nam molestie nunc a dui scelerisque interdum. Vestibulum id consequat neque. Praesent ac justo adipiscing dui volutpat laoreet. In hac habitasse platea dictumst.

Quisque sed dictum neque. Phasellus venenatis dolor ut elementum iaculis. Aenean vel neque luctus, blandit tortor at, elementum nibh. In erat nisi, aliquet volutpat pellentesque commodo, elementum et arcu. Praesent vitae euismod enim. Donec accumsan sapien nec neque lacinia tempus. Nunc scelerisque orci sit amet auctor varius. Donec tincidunt et lectus quis elementum.

Fusce elementum id nisl at sagittis. Fusce rutrum pharetra facilisis. Curabitur eu tortor imperdiet, lacinia risus a, gravida ligula. Nullam sit amet nisi eu enim dignissim semper vitae non arcu. Etiam eget turpis ut massa lacinia ornare. Nullam dignissim nisi non nisi ullamcorper posuere. Etiam ut nibh blandit, mattis ligula pulvinar cursus nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut placerat libero arcu, vitae venenatis lacus rhoncus ac. Ut sed magna sit amet ligula luctus tincidunt non in lectus. Aenean sollicitudin metus non justo posuere eleifend.

Nullam ac sapien nec lacus auctor consequat sit amet nec massa. Fusce viverra magna a sapien dapibus scelerisque. Phasellus ege quam in neque aliquam pulvinar. Pellentesque enim justo, sagittis at hendrerit et, laoreet sed purus. Duis ullamcorper malesuada purus vitae hendrerit. Praesent at mattis velit, ac convallis sapien. Nunc pellentesque, quam a condimentum facilisis, nunc leo pulvinar dui, at porta purus est id nisl. Donec feugiat, massa et ultricies tincidunt, dui mi vestibulum nisi, nec pharetra dolor dolor pharetra velit.

Multiple Open Tabs

These options will allow multiple tabs to open and keep at least one open all the time.
 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur accumsan nulla id volutpat tempor. Mauris sagittis risus eget vestibulum mollis. Morbi non leo scelerisque nunc fringilla porta. Sed imperdiet odio id vehicula pellentesque. Nam tincidunt dignissim nibh et fringilla. Quisque tempus adipiscing ipsum quis convallis. Pellentesque pretium augue eu lacinia sodales. Nulla ornare nulla ultricies, laoreet metus eget, sagittis elit. Fusce posuere ornare sapien vitae lacinia.

Morbi vel bibendum leo. Suspendisse vestibulum, lacus et hendrerit luctus, tellus lacus gravida purus, luctus tincidunt mauris ipsum consectetur libero. Curabitur eleifend posuere laoreet. Nunc pharetra dapibus vestibulum. Praesent sollicitudin interdum mi vitae interdum. Nam molestie nunc a dui scelerisque interdum. Vestibulum id consequat neque. Praesent ac justo adipiscing dui volutpat laoreet. In hac habitasse platea dictumst.

Quisque sed dictum neque. Phasellus venenatis dolor ut elementum iaculis. Aenean vel neque luctus, blandit tortor at, elementum nibh. In erat nisi, aliquet volutpat pellentesque commodo, elementum et arcu. Praesent vitae euismod enim. Donec accumsan sapien nec neque lacinia tempus. Nunc scelerisque orci sit amet auctor varius. Donec tincidunt et lectus quis elementum.

Fusce elementum id nisl at sagittis. Fusce rutrum pharetra facilisis. Curabitur eu tortor imperdiet, lacinia risus a, gravida ligula. Nullam sit amet nisi eu enim dignissim semper vitae non arcu. Etiam eget turpis ut massa lacinia ornare. Nullam dignissim nisi non nisi ullamcorper posuere. Etiam ut nibh blandit, mattis ligula pulvinar cursus nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut placerat libero arcu, vitae venenatis lacus rhoncus ac. Ut sed magna sit amet ligula luctus tincidunt non in lectus. Aenean sollicitudin metus non justo posuere eleifend.

Nullam ac sapien nec lacus auctor consequat sit amet nec massa. Fusce viverra magna a sapien dapibus scelerisque. Phasellus ege quam in neque aliquam pulvinar. Pellentesque enim justo, sagittis at hendrerit et, laoreet sed purus. Duis ullamcorper malesuada purus vitae hendrerit. Praesent at mattis velit, ac convallis sapien. Nunc pellentesque, quam a condimentum facilisis, nunc leo pulvinar dui, at porta purus est id nisl. Donec feugiat, massa et ultricies tincidunt, dui mi vestibulum nisi, nec pharetra dolor dolor pharetra velit.

Heights Options

Fixed Height

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur accumsan nulla id volutpat tempor. Mauris sagittis risus eget vestibulum mollis. Morbi non leo scelerisque nunc fringilla porta. Sed imperdiet odio id vehicula pellentesque. Nam tincidunt dignissim nibh et fringilla. Quisque tempus adipiscing ipsum quis convallis. Pellentesque pretium augue eu lacinia sodales. Nulla ornare nulla ultricies, laoreet metus eget, sagittis elit. Fusce posuere ornare sapien vitae lacinia.

Morbi vel bibendum leo. Suspendisse vestibulum, lacus et hendrerit luctus, tellus lacus gravida purus, luctus tincidunt mauris ipsum consectetur libero. Curabitur eleifend posuere laoreet. Nunc pharetra dapibus vestibulum. Praesent sollicitudin interdum mi vitae interdum. Nam molestie nunc a dui scelerisque interdum. Vestibulum id consequat neque. Praesent ac justo adipiscing dui volutpat laoreet. In hac habitasse platea dictumst.

Quisque sed dictum neque. Phasellus venenatis dolor ut elementum iaculis. Aenean vel neque luctus, blandit tortor at, elementum nibh. In erat nisi, aliquet volutpat pellentesque commodo, elementum et arcu. Praesent vitae euismod enim. Donec accumsan sapien nec neque lacinia tempus. Nunc scelerisque orci sit amet auctor varius. Donec tincidunt et lectus quis elementum.

Fusce elementum id nisl at sagittis. Fusce rutrum pharetra facilisis. Curabitur eu tortor imperdiet, lacinia risus a, gravida ligula. Nullam sit amet nisi eu enim dignissim semper vitae non arcu. Etiam eget turpis ut massa lacinia ornare. Nullam dignissim nisi non nisi ullamcorper posuere. Etiam ut nibh blandit, mattis ligula pulvinar cursus nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut placerat libero arcu, vitae venenatis lacus rhoncus ac. Ut sed magna sit amet ligula luctus tincidunt non in lectus. Aenean sollicitudin metus non justo posuere eleifend.

Nullam ac sapien nec lacus auctor consequat sit amet nec massa. Fusce viverra magna a sapien dapibus scelerisque. Phasellus ege quam in neque aliquam pulvinar. Pellentesque enim justo, sagittis at hendrerit et, laoreet sed purus. Duis ullamcorper malesuada purus vitae hendrerit. Praesent at mattis velit, ac convallis sapien. Nunc pellentesque, quam a condimentum facilisis, nunc leo pulvinar dui, at porta purus est id nisl. Donec feugiat, massa et ultricies tincidunt, dui mi vestibulum nisi, nec pharetra dolor dolor pharetra velit.

Fill Parent

These options will set the height to the parent overall height and allowing multiple tabs to be open at once.
 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur accumsan nulla id volutpat tempor. Mauris sagittis risus eget vestibulum mollis. Morbi non leo scelerisque nunc fringilla porta. Sed imperdiet odio id vehicula pellentesque. Nam tincidunt dignissim nibh et fringilla. Quisque tempus adipiscing ipsum quis convallis. Pellentesque pretium augue eu lacinia sodales. Nulla ornare nulla ultricies, laoreet metus eget, sagittis elit. Fusce posuere ornare sapien vitae lacinia.

Morbi vel bibendum leo. Suspendisse vestibulum, lacus et hendrerit luctus, tellus lacus gravida purus, luctus tincidunt mauris ipsum consectetur libero. Curabitur eleifend posuere laoreet. Nunc pharetra dapibus vestibulum. Praesent sollicitudin interdum mi vitae interdum. Nam molestie nunc a dui scelerisque interdum. Vestibulum id consequat neque. Praesent ac justo adipiscing dui volutpat laoreet. In hac habitasse platea dictumst.

Quisque sed dictum neque. Phasellus venenatis dolor ut elementum iaculis. Aenean vel neque luctus, blandit tortor at, elementum nibh. In erat nisi, aliquet volutpat pellentesque commodo, elementum et arcu. Praesent vitae euismod enim. Donec accumsan sapien nec neque lacinia tempus. Nunc scelerisque orci sit amet auctor varius. Donec tincidunt et lectus quis elementum.

Fusce elementum id nisl at sagittis. Fusce rutrum pharetra facilisis. Curabitur eu tortor imperdiet, lacinia risus a, gravida ligula. Nullam sit amet nisi eu enim dignissim semper vitae non arcu. Etiam eget turpis ut massa lacinia ornare. Nullam dignissim nisi non nisi ullamcorper posuere. Etiam ut nibh blandit, mattis ligula pulvinar cursus nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut placerat libero arcu, vitae venenatis lacus rhoncus ac. Ut sed magna sit amet ligula luctus tincidunt non in lectus. Aenean sollicitudin metus non justo posuere eleifend.

Nullam ac sapien nec lacus auctor consequat sit amet nec massa. Fusce viverra magna a sapien dapibus scelerisque. Phasellus ege quam in neque aliquam pulvinar. Pellentesque enim justo, sagittis at hendrerit et, laoreet sed purus. Duis ullamcorper malesuada purus vitae hendrerit. Praesent at mattis velit, ac convallis sapien. Nunc pellentesque, quam a condimentum facilisis, nunc leo pulvinar dui, at porta purus est id nisl. Donec feugiat, massa et ultricies tincidunt, dui mi vestibulum nisi, nec pharetra dolor dolor pharetra velit.

Content Types

The accordion support multiple content types out of the box and can be extended to support any special case.
 

In hendrerit mauris at sem sodales tincidunt. Quisque tempor metus tortor, a aliquet leo semper scelerisque. Praesent tempus, arcu ac scelerisque porta, purus massa tempor ipsum, viverra iaculis nisi neque sed velit. Morbi est sem, lobortis congue pharetra ut, imperdiet eu tortor. Nunc porta purus magna, ut ultrices felis sodales sed. Ut vehicula vel urna et pellentesque. Nam nec dapibus risus. Vivamus eu nulla ullamcorper, cursus ante at, tempus erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris sagittis nec velit nec fermentum. Curabitur elementum eros sem, in facilisis ligula facilisis vel.

Sortable

Sorting within One Accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur accumsan nulla id volutpat tempor. Mauris sagittis risus eget vestibulum mollis. Morbi non leo scelerisque nunc fringilla porta. Sed imperdiet odio id vehicula pellentesque. Nam tincidunt dignissim nibh et fringilla. Quisque tempus adipiscing ipsum quis convallis. Pellentesque pretium augue eu lacinia sodales. Nulla ornare nulla ultricies, laoreet metus eget, sagittis elit. Fusce posuere ornare sapien vitae lacinia.

Morbi vel bibendum leo. Suspendisse vestibulum, lacus et hendrerit luctus, tellus lacus gravida purus, luctus tincidunt mauris ipsum consectetur libero. Curabitur eleifend posuere laoreet. Nunc pharetra dapibus vestibulum. Praesent sollicitudin interdum mi vitae interdum. Nam molestie nunc a dui scelerisque interdum. Vestibulum id consequat neque. Praesent ac justo adipiscing dui volutpat laoreet. In hac habitasse platea dictumst.

Quisque sed dictum neque. Phasellus venenatis dolor ut elementum iaculis. Aenean vel neque luctus, blandit tortor at, elementum nibh. In erat nisi, aliquet volutpat pellentesque commodo, elementum et arcu. Praesent vitae euismod enim. Donec accumsan sapien nec neque lacinia tempus. Nunc scelerisque orci sit amet auctor varius. Donec tincidunt et lectus quis elementum.

Fusce elementum id nisl at sagittis. Fusce rutrum pharetra facilisis. Curabitur eu tortor imperdiet, lacinia risus a, gravida ligula. Nullam sit amet nisi eu enim dignissim semper vitae non arcu. Etiam eget turpis ut massa lacinia ornare. Nullam dignissim nisi non nisi ullamcorper posuere. Etiam ut nibh blandit, mattis ligula pulvinar cursus nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut placerat libero arcu, vitae venenatis lacus rhoncus ac. Ut sed magna sit amet ligula luctus tincidunt non in lectus. Aenean sollicitudin metus non justo posuere eleifend.

Nullam ac sapien nec lacus auctor consequat sit amet nec massa. Fusce viverra magna a sapien dapibus scelerisque. Phasellus ege quam in neque aliquam pulvinar. Pellentesque enim justo, sagittis at hendrerit et, laoreet sed purus. Duis ullamcorper malesuada purus vitae hendrerit. Praesent at mattis velit, ac convallis sapien. Nunc pellentesque, quam a condimentum facilisis, nunc leo pulvinar dui, at porta purus est id nisl. Donec feugiat, massa et ultricies tincidunt, dui mi vestibulum nisi, nec pharetra dolor dolor pharetra velit.

Sorting Between Different Accordions

This example will show how to sort tabs between different accordions.
 

Accordion 1, Paragraph 1

Accordion 1, Paragraph 2

Accordion 1, Paragraph 3

Accordion 2, Paragraph 1

Accordion 2, Paragraph 2

Accordion 2, Paragraph 3

Accordion 3, Paragraph 1

Accordion 3, Paragraph 2

Accordion 3, Paragraph 3


Add & Remove Tabs

In this example, we'll show how to add and remove tabs to the accordion.

Accordion, Paragraph 1

Accordion, Paragraph 2

Accordion, Paragraph 3