Expand / Collapse Widget Examples

Three examples show accessible expand/collapse controls. Each widget is wrapped with a container having class="example", and each controlled content area uses class="details".

Example 1:

Simple toggle to reveal a short description.

Example 2:

Reveal multi-paragraph content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, nisl in dictum tristique, arcu nibh pulvinar felis, sit amet sodales metus justo a risus.

Suspendisse potenti. Integer pretium, erat in facilisis blandit, sem urna feugiat lectus, eu faucibus metus nibh quis arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Example 3:

A larger content area with nested panels.

Panel A

Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.

Panel B

Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur aliquet quam id dui posuere blandit.

Panel C

Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt.