Expand/Collapse Widgets

Examples of native and custom expandable sections. Each widget is wrapped in a div with an "example" class, and the controlled content container uses the "details" class.

Widget 1: Native HTML details/summary

More about this product

This section uses the semantic <details> and <summary> elements. It is accessible by default and works without JavaScript.

  • Keyboard and screen reader friendly.
  • Minimal code required.
  • Customizable with CSS.

Tip: You can style the summary indicator to provide visual feedback.

Widget 2: Button-controlled panel

This widget uses a button to toggle a content panel with the "details" class.

Widget 3: Checkbox-driven toggle (CSS only)

What is this? A simple CSS-driven expand/collapse using a checkbox.

Why use it? It works without JavaScript and demonstrates basic progressive enhancement.

Can I style it? Yes, the label can look like a button, and the content container has the "details" class for consistent styling.

The label toggles the checkbox, which shows or hides the adjacent content block.