Accordion

An accordion allows you to create content panels and only expand at most one of them. The rest of the content panels are automatically collapsed. Click the panel titles to expand them.

Through the contextmenu, you can mark the panels to be open/closed by default.

Accordions can hold any kind of contents. They can also be nested.

Panel 1

Demo title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacinia leo eu nulla porttitor tempus. Nunc eu tincidunt nisi. Integer non turpis quis est fermentum ullamcorper. Sed posuere elementum nisi id dictum. Nulla a est et urna tempus volutpat. Nullam vitae sem sagittis, ultricies nisl sed, molestie ipsum. Etiam commodo nisi arcu, ornare euismod purus semper eu. Curabitur finibus facilisis suscipit. Integer gravida arcu at rutrum rutrum.


Panel 2 - notice the nested accordion

Sub-panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan vitae leo sit amet venenatis. Cras dignissim, risus egestas molestie placerat, neque nulla sollicitudin lacus, at ultricies felis felis at augue. Fusce at erat hendrerit, blandit nulla ut, cursus justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce placerat convallis luctus. Mauris condimentum leo eget dui efficitur, in eleifend libero rhoncus. In hac habitasse platea dictumst. Vestibulum dictum mollis nulla sit amet dignissim. Nullam sit amet cursus felis.

Subpanel A

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra cursus lacus in volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum dui nec ante bibendum ultricies. Vestibulum accumsan mollis quam sed congue. Aliquam et nunc sapien. Fusce elementum volutpat felis laoreet accumsan. Praesent eget congue tortor. In ac semper eros.

Subpanel B

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin egestas nunc, at hendrerit felis pellentesque non. Phasellus et dolor et risus interdum pharetra. Pellentesque ullamcorper nulla at nisl tincidunt sagittis. Donec nec tortor vitae neque tristique scelerisque. Nunc commodo eget orci a ullamcorper. Quisque condimentum justo eu mattis accumsan. Fusce felis enim, consectetur a congue ac, facilisis sit amet tortor. Donec feugiat eu dui nec sollicitudin. Donec porttitor lobortis convallis. Sed tincidunt magna sit amet tellus aliquet interdum.

Panel 3

Other demo title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus viverra risus a tortor tempus tincidunt. Donec sed mi id est aliquam sodales in quis mi. Nunc sit amet ante metus. Quisque augue libero, mollis vitae egestas ut, vulputate quis orci. Fusce blandit dui quis enim maximus tristique a finibus mauris. Sed commodo nibh nec accumsan mollis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam venenatis leo nec tellus facilisis malesuada. Vivamus finibus nisl sapien, ut volutpat sem sollicitudin at. Sed id tempor turpis. Fusce libero arcu, mollis ut nibh iaculis, luctus laoreet massa. Integer quis condimentum elit. Proin malesuada pulvinar purus, non scelerisque justo sollicitudin ut.