WNCTG Accordion - Dark on Light
Also see: Light on Dark Demo
Everything below this point and above the footer sections is displayed by four different instances of the WNCTG Accordion block...
JQuery-UI Accordion in Stack
This JQuery-UI Accordion is imbedded in a Stack.
or click on Titles
Panel Title 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et nisi sem. Curabitur vitae tempor lacus. Mauris rhoncus purus et dui pretium eleifend in sed ex. Aliquam iaculis ex neque, non pulvinar metus volutpat at. Pellentesque imperdiet, urna et dignissim pretium, ex erat ullamcorper dui, quis vestibulum augue sapien vulputate nibh. Nunc eu placerat nisl. Praesent porttitor semper dui vitae fermentum. Pellentesque condimentum convallis neque, quis finibus purus ornare sed. Vestibulum varius gravida posuere.
Panel Title 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et nisi sem. Curabitur vitae tempor lacus. Mauris rhoncus purus et dui pretium eleifend in sed ex. Aliquam iaculis ex neque, non pulvinar metus volutpat at. Pellentesque imperdiet, urna et dignissim pretium, ex erat ullamcorper dui, quis vestibulum augue sapien vulputate nibh. Nunc eu placerat nisl. Praesent porttitor semper dui vitae fermentum. Pellentesque condimentum convallis neque, quis finibus purus ornare sed. Vestibulum varius gravida posuere.
Panel Title 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et nisi sem. Curabitur vitae tempor lacus. Mauris rhoncus purus et dui pretium eleifend in sed ex. Aliquam iaculis ex neque, non pulvinar metus volutpat at. Pellentesque imperdiet, urna et dignissim pretium, ex erat ullamcorper dui, quis vestibulum augue sapien vulputate nibh. Nunc eu placerat nisl. Praesent porttitor semper dui vitae fermentum. Pellentesque condimentum convallis neque, quis finibus purus ornare sed. Vestibulum varius gravida posuere.
JQuery-UI Accordion Group Title
Panel Title 1
This Accordion Group is showing only the Group Title but not the Group Description.
The Animation Speed has been set to the maximum setting of 1000ms.
The Open 1st Panel option has been checked.
The Expand-Collapse buttons are displayed and right aligned with no trailing text.
Close Encounters
Panel Title 3
Donec sed felis sapien. Pellentesque in purus id lectus malesuada vulputate. Suspendisse et lectus quam. Vivamus est turpis, consequat at dui id, hendrerit tempus dolor. Vestibulum ac libero ex. Curabitur mollis eros sed diam tempor, nec interdum metus suscipit. Fusce non tincidunt eros. Curabitur sollicitudin non dolor condimentum commodo. Maecenas hendrerit nunc turpis, eu dictum erat mollis sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu venenatis orci, ut rutrum leo. Maecenas commodo rhoncus nibh sit amet porta. Phasellus eu justo ut diam bibendum convallis tincidunt eu neque.
Panel Title 4
Phasellus suscipit pretium hendrerit. Sed at nibh viverra, pulvinar quam at, fermentum neque. Nulla non mauris vel dui sodales ornare. Aenean vel erat gravida, varius dui non, tempor lectus. Aenean vehicula tortor tellus, eget elementum enim suscipit sit amet. Nunc pellentesque velit vitae scelerisque molestie. Curabitur pellentesque est id volutpat sagittis. Curabitur quis enim sagittis, malesuada eros vitae, semper ante. Nulla finibus ex pellentesque, convallis velit in, lacinia dolor. Vivamus pulvinar velit a nibh ultrices posuere. Maecenas ullamcorper nibh ipsum, vitae ultricies justo venenatis sed. Sed massa nunc, blandit vulputate vestibulum at, tincidunt non erat. Pellentesque porttitor vel magna ac tempor. Nullam rutrum, ante vel dignissim vestibulum, tellus ante suscipit ex, ut consequat leo nibh sit amet augue. Cras laoreet, dolor sodales tempor elementum, est augue ultricies elit, eu hendrerit ligula orci non enim.
Stacked Non-Accordian Group Title
This is a Stacked Non-Accordion with the Group Title and Group Description being displayed above the titles and contents of three accordion panels without the panels.
Panel Title 1
Pellentesque maximus porta ex ut sagittis. Proin euismod accumsan velit, vel luctus turpis suscipit vitae. Mauris pharetra ante massa, id molestie nisl dapibus vitae. In suscipit ex ut mattis posuere. Integer facilisis ut eros at malesuada. Curabitur tellus lectus, fringilla id massa sit amet, scelerisque pretium massa. Pellentesque porta aliquet blandit. Quisque at fringilla leo. Praesent ipsum est, feugiat quis enim vel, rutrum placerat massa. Nunc ac feugiat leo. Aenean nibh tellus, porta quis mattis maximus, varius iaculis turpis. Pellentesque suscipit ipsum accumsan libero vehicula semper. Curabitur sit amet neque justo. In convallis erat quis auctor placerat. Duis dapibus magna sit amet pretium fringilla. Aenean in erat feugiat, rhoncus tortor nec, vestibulum turpis.
Panel Title 2
Pellentesque maximus porta ex ut sagittis. Proin euismod accumsan velit, vel luctus turpis suscipit vitae. Mauris pharetra ante massa, id molestie nisl dapibus vitae. In suscipit ex ut mattis posuere. Integer facilisis ut eros at malesuada. Curabitur tellus lectus, fringilla id massa sit amet, scelerisque pretium massa. Pellentesque porta aliquet blandit. Quisque at fringilla leo. Praesent ipsum est, feugiat quis enim vel, rutrum placerat massa. Nunc ac feugiat leo. Aenean nibh tellus, porta quis mattis maximus, varius iaculis turpis. Pellentesque suscipit ipsum accumsan libero vehicula semper. Curabitur sit amet neque justo. In convallis erat quis auctor placerat. Duis dapibus magna sit amet pretium fringilla. Aenean in erat feugiat, rhoncus tortor nec, vestibulum turpis.
Panel Title 3
Proin tortor tortor, pretium nec odio eget, congue ullamcorper leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec cursus lacus et justo fermentum consectetur. Pellentesque nunc diam, sollicitudin at risus sit amet, vestibulum venenatis sem. Donec aliquet turpis id vehicula tincidunt. Vestibulum vehicula libero ex, et cursus velit bibendum ac. Ut nec scelerisque nisl. Proin ac nulla ut velit fringilla mattis nec quis nulla. Sed tristique interdum ipsum quis elementum. Vestibulum scelerisque massa ut enim rutrum, eget feugiat nunc faucibus.