Accordion Widgets

This is the content inside the first widget. It uses a CSS transition on the max-height property to create a smooth sliding effect when expanding or collapsing.

The container for this content has a class of details. The wrapping container for the entire component has a class of example.

JavaScript is used to toggle an active class on the parent wrapper, which triggers the CSS changes needed to show the content.