Expand / Collapse Widget
Examples of accessible expand/collapse widgets. Each widget is wrapped in a div.example and the controlled content uses the details class.
This is the detailed content for the Overview section. The container has the class "details". When JavaScript is enabled the content is collapsed by default and can be expanded using the button above, which updates aria-expanded and aria-controls for accessibility.
Here is some additional information. You can place any content inside the details container: paragraphs, lists, images, forms, etc. The script will wire up aria-controls/aria-expanded and toggle the "open" class to animate visibility.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, velit, voluptatem. Dolorem, reiciendis ipsam. Mollitia, at, perferendis! Temporibus, quisquam magni. Natus, asperiores cupiditate aut recusandae a. Pariatur, distinctio soluta.
Ullam sint impedit, obcaecati quasi doloremque. Architecto cum laboriosam, id maiores facilis! Sequi, repellat, temporibus. Necessitatibus iste, animi molestias obcaecati dolorum impedit, nobis ex, voluptatum, eaque officiis eum.