$dom accordian demo

This demo uses the $dom JavaScript library to find all <dl> tags on this page that have a class of accordian and convert them into interactive animated accordians. The script is unobtrusive and degrades gracefully in browsers that do not support JavaScript.

Simple accordian

Item 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras non urna. Proin lacus. Maecenas feugiat tempor nisi. Cras faucibus, sem sed aliquam dignissim, ipsum ligula viverra ligula, in viverra tortor felis vel nibh. Proin sed odio. Duis vel arcu vel dolor commodo lacinia. Aliquam augue pede, sollicitudin eu, commodo non, cursus non, nisi. Nulla facilisi. Nullam id elit. Morbi dapibus nisl id tellus. Donec fringilla accumsan turpis.

Item 2

Aenean sapien. Ut nisi sapien, volutpat rhoncus, ullamcorper nec, lacinia vitae, mi. Cras molestie, ipsum ac tempor mattis, risus nisi consectetuer nulla, in convallis risus elit id enim. Sed ac turpis. Aenean in erat porttitor magna commodo suscipit. Nulla facilisi. Mauris vel sem quis lorem tristique eleifend. Integer accumsan. Suspendisse semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut sem. Nam elementum lacus sed est. Fusce laoreet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras non urna. Proin lacus. Maecenas feugiat tempor nisi. Cras faucibus, sem sed aliquam dignissim, ipsum ligula viverra ligula, in viverra tortor felis vel nibh. Proin sed odio. Duis vel arcu vel dolor commodo lacinia. Aliquam augue pede, sollicitudin eu, commodo non, cursus non, nisi. Nulla facilisi. Nullam id elit. Morbi dapibus nisl id tellus. Donec fringilla accumsan turpis.

Item 3

Cras a sapien at justo aliquet eleifend. Sed et nibh. Suspendisse vestibulum erat eu nulla ornare sagittis. Aliquam sem odio, ultricies eget, semper eget, tempus non, turpis. Quisque ut velit nec risus ornare feugiat. Proin felis. Sed venenatis arcu eu tortor. Vestibulum nulla eros, sollicitudin ut, eleifend et, vehicula ac, lorem.

Cras bibendum, dui ultricies tristique fermentum, nisl neque porttitor nunc, quis posuere nulla massa eu dui. Nullam diam lacus, dapibus rutrum, consequat vitae, molestie ac, nisi. Donec eleifend velit et magna. Pellentesque lobortis magna sed neque. Aliquam est. Suspendisse in metus a augue tincidunt auctor. Vivamus accumsan augue quis nisi.

Item 4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras non urna. Proin lacus. Maecenas feugiat tempor nisi. Cras faucibus, sem sed aliquam dignissim, ipsum ligula viverra ligula, in viverra tortor felis vel nibh. Proin sed odio. Duis vel arcu vel dolor commodo lacinia. Aliquam augue pede, sollicitudin eu, commodo non, cursus non, nisi. Nulla facilisi. Nullam id elit. Morbi dapibus nisl id tellus. Donec fringilla accumsan turpis.

Nested accordians

Item 1
Child Item 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras non urna. Proin lacus. Maecenas feugiat tempor nisi. Cras faucibus, sem sed aliquam dignissim, ipsum ligula viverra ligula, in viverra tortor felis vel nibh. Proin sed odio. Duis vel arcu vel dolor commodo lacinia. Aliquam augue pede, sollicitudin eu, commodo non, cursus non, nisi. Nulla facilisi. Nullam id elit. Morbi dapibus nisl id tellus. Donec fringilla accumsan turpis.

Child Item 2

Aenean sapien. Ut nisi sapien, volutpat rhoncus, ullamcorper nec, lacinia vitae, mi. Cras molestie, ipsum ac tempor mattis, risus nisi consectetuer nulla, in convallis risus elit id enim. Sed ac turpis. Aenean in erat porttitor magna commodo suscipit. Nulla facilisi. Mauris vel sem quis lorem tristique eleifend. Integer accumsan. Suspendisse semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut sem. Nam elementum lacus sed est. Fusce laoreet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras non urna. Proin lacus. Maecenas feugiat tempor nisi. Cras faucibus, sem sed aliquam dignissim, ipsum ligula viverra ligula, in viverra tortor felis vel nibh. Proin sed odio. Duis vel arcu vel dolor commodo lacinia. Aliquam augue pede, sollicitudin eu, commodo non, cursus non, nisi. Nulla facilisi. Nullam id elit. Morbi dapibus nisl id tellus. Donec fringilla accumsan turpis.

Child Item 3

Aenean sapien. Ut nisi sapien, volutpat rhoncus, ullamcorper nec, lacinia vitae, mi. Cras molestie, ipsum ac tempor mattis, risus nisi consectetuer nulla, in convallis risus elit id enim. Sed ac turpis. Aenean in erat porttitor magna commodo suscipit. Nulla facilisi. Mauris vel sem quis lorem tristique eleifend. Integer accumsan. Suspendisse semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut sem. Nam elementum lacus sed est. Fusce laoreet.

Item 2
Child Item 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras non urna. Proin lacus. Maecenas feugiat tempor nisi. Cras faucibus, sem sed aliquam dignissim, ipsum ligula viverra ligula, in viverra tortor felis vel nibh. Proin sed odio. Duis vel arcu vel dolor commodo lacinia. Aliquam augue pede, sollicitudin eu, commodo non, cursus non, nisi. Nulla facilisi. Nullam id elit. Morbi dapibus nisl id tellus. Donec fringilla accumsan turpis.

Child Item 2

Aenean sapien. Ut nisi sapien, volutpat rhoncus, ullamcorper nec, lacinia vitae, mi. Cras molestie, ipsum ac tempor mattis, risus nisi consectetuer nulla, in convallis risus elit id enim. Sed ac turpis. Aenean in erat porttitor magna commodo suscipit. Nulla facilisi. Mauris vel sem quis lorem tristique eleifend. Integer accumsan. Suspendisse semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut sem. Nam elementum lacus sed est. Fusce laoreet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras non urna. Proin lacus. Maecenas feugiat tempor nisi. Cras faucibus, sem sed aliquam dignissim, ipsum ligula viverra ligula, in viverra tortor felis vel nibh. Proin sed odio. Duis vel arcu vel dolor commodo lacinia. Aliquam augue pede, sollicitudin eu, commodo non, cursus non, nisi. Nulla facilisi. Nullam id elit. Morbi dapibus nisl id tellus. Donec fringilla accumsan turpis.

Item 3
Child Item 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras non urna. Proin lacus. Maecenas feugiat tempor nisi. Cras faucibus, sem sed aliquam dignissim, ipsum ligula viverra ligula, in viverra tortor felis vel nibh. Proin sed odio. Duis vel arcu vel dolor commodo lacinia. Aliquam augue pede, sollicitudin eu, commodo non, cursus non, nisi. Nulla facilisi. Nullam id elit. Morbi dapibus nisl id tellus. Donec fringilla accumsan turpis.

Child Item 2

Aenean sapien. Ut nisi sapien, volutpat rhoncus, ullamcorper nec, lacinia vitae, mi. Cras molestie, ipsum ac tempor mattis, risus nisi consectetuer nulla, in convallis risus elit id enim. Sed ac turpis. Aenean in erat porttitor magna commodo suscipit. Nulla facilisi. Mauris vel sem quis lorem tristique eleifend. Integer accumsan. Suspendisse semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut sem. Nam elementum lacus sed est. Fusce laoreet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras non urna. Proin lacus. Maecenas feugiat tempor nisi. Cras faucibus, sem sed aliquam dignissim, ipsum ligula viverra ligula, in viverra tortor felis vel nibh. Proin sed odio. Duis vel arcu vel dolor commodo lacinia. Aliquam augue pede, sollicitudin eu, commodo non, cursus non, nisi. Nulla facilisi. Nullam id elit. Morbi dapibus nisl id tellus. Donec fringilla accumsan turpis.