Details Accordion
The accordion component that the WSU WDSv2 provides is based on divs, buttons, and
JavaScript. This instead is built on top of the
<details> element.
This is more accessible and has recently been updated to support searching within closed
details contents.
The one downside to using <details> is that the opening and closing can't
currently be animated.
Accordion Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium blandit lacus at dignissim. Sed elit leo, auctor sed diam eu, vulputate laoreet lectus. Duis fringilla tellus ac metus dictum, sit amet volutpat dolor ultricies. In sed tincidunt sem, interdum bibendum quam. Praesent ornare feugiat massa, et lobortis est blandit vel.
Ut ullamcorper mi ipsum, vel blandit justo cursus egestas. Sed et mauris turpis. Maecenas vel felis sagittis, ultrices risus non, auctor mi. Proin ultrices mauris lacus, eget finibus quam viverra nec. In hac habitasse platea dictumst. Vivamus ut luctus massa. Nam vehicula nec felis auctor gravida. Quisque pulvinar odio sed sapien rutrum tincidunt. Maecenas eget enim sollicitudin, molestie est et, tristique augue. Nulla interdum arcu et libero aliquam consequat. Nam rhoncus placerat orci, id sodales augue.
Accordion Title 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium blandit lacus at dignissim. Sed elit leo, auctor sed diam eu, vulputate laoreet lectus. Duis fringilla tellus ac metus dictum, sit amet volutpat dolor ultricies. In sed tincidunt sem, interdum bibendum quam. Praesent ornare feugiat massa, et lobortis est blandit vel.
Ut ullamcorper mi ipsum, vel blandit justo cursus egestas. Sed et mauris turpis. Maecenas vel felis sagittis, ultrices risus non, auctor mi. Proin ultrices mauris lacus, eget finibus quam viverra nec. In hac habitasse platea dictumst. Vivamus ut luctus massa. Nam vehicula nec felis auctor gravida. Quisque pulvinar odio sed sapien rutrum tincidunt. Maecenas eget enim sollicitudin, molestie est et, tristique augue. Nulla interdum arcu et libero aliquam consequat. Nam rhoncus placerat orci, id sodales augue.
You can make the accordions exclusive (only one can be open at a time) by adding a
name attribute with the same value:
Accordion Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium blandit lacus at dignissim. Sed elit leo, auctor sed diam eu, vulputate laoreet lectus. Duis fringilla tellus ac metus dictum, sit amet volutpat dolor ultricies. In sed tincidunt sem, interdum bibendum quam. Praesent ornare feugiat massa, et lobortis est blandit vel.
Ut ullamcorper mi ipsum, vel blandit justo cursus egestas. Sed et mauris turpis. Maecenas vel felis sagittis, ultrices risus non, auctor mi. Proin ultrices mauris lacus, eget finibus quam viverra nec. In hac habitasse platea dictumst. Vivamus ut luctus massa. Nam vehicula nec felis auctor gravida. Quisque pulvinar odio sed sapien rutrum tincidunt. Maecenas eget enim sollicitudin, molestie est et, tristique augue. Nulla interdum arcu et libero aliquam consequat. Nam rhoncus placerat orci, id sodales augue.
Accordion Title 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium blandit lacus at dignissim. Sed elit leo, auctor sed diam eu, vulputate laoreet lectus. Duis fringilla tellus ac metus dictum, sit amet volutpat dolor ultricies. In sed tincidunt sem, interdum bibendum quam. Praesent ornare feugiat massa, et lobortis est blandit vel.
Ut ullamcorper mi ipsum, vel blandit justo cursus egestas. Sed et mauris turpis. Maecenas vel felis sagittis, ultrices risus non, auctor mi. Proin ultrices mauris lacus, eget finibus quam viverra nec. In hac habitasse platea dictumst. Vivamus ut luctus massa. Nam vehicula nec felis auctor gravida. Quisque pulvinar odio sed sapien rutrum tincidunt. Maecenas eget enim sollicitudin, molestie est et, tristique augue. Nulla interdum arcu et libero aliquam consequat. Nam rhoncus placerat orci, id sodales augue.
Only the last accordion in a series will have a margin-bottom.
This styling doesn't have bottom padding on the content and relies on the last element to
provide spacing at the end of the content. Basically, you'll need to wrap the contents of the
accordion in something like a <p>.