Expand/Collapse Widgets

Example 1: Basic Information

Click to reveal more details

This is the content that expands and collapses. You can put any HTML elements inside here, such as paragraphs, lists, images, or even other widgets.

  • Item One
  • Item Two
  • Item Three

Feel free to click the summary again to hide this content.

Example 2: Product Specifications

View Product Specs

Model: XYZ-123

Weight: 2.5 kg

Dimensions: 30cm x 20cm x 5cm

Material: Aluminium alloy

This section provides detailed specifications for the product.

Example 3: Frequently Asked Questions

What is an expand/collapse widget?

An expand/collapse widget is a UI component that allows users to show or hide a section of content. It helps in organizing information and reducing visual clutter on a page.


How is it implemented in HTML?

The native HTML <details> and <summary> elements are often used to create these widgets, as demonstrated on this page. JavaScript can also be used for more custom implementations.