Expand/Collapse Widget Demo

Widget 1: Custom toggle with animated height

First custom expand/collapse using height animation

This panel expands and collapses with a smooth height transition. The container for controlled content has a class of "details".

  • Accessible with ARIA attributes
  • Animated reveal using height

Widget 2: Toggle with open class

Second widget uses a CSS class to reveal content

Widget 3: Native details element

Click to expand (native)

This widget uses the native details element. The content container has a class of "details".

Opening this will show the extra information without custom JS.