Expand/Collapse Widget Demo

This page demonstrates two expand/collapse widgets wrapped in containers with an example class. The first widget uses a custom toggle and a content container with a details class. The second widget uses the native HTML details element, also given the details class.

Custom Toggle Widget

Tip: Use the button to toggle visibility. The button text updates to reflect the state.

Native Details Element

Click to expand

This widget uses the native HTML details/summary elements to show and hide content. It is contained within an element that has the class "details".

Using semantic elements like details/summary improves accessibility and provides built-in expand/collapse behavior.