Expand/Collapse Widgets

An expand/collapse widget, often called an "accordion" or "disclosure widget", is a UI element that allows users to toggle the visibility of content. It's useful for displaying large amounts of information in a compact way, letting users choose what they want to see.

Click the button above to hide or show this text. This particular implementation uses CSS transitions for a smooth opening and closing effect.

This widget works by toggling a CSS class on the content container (the div with class .details). When the .active class is added, CSS rules change its max-height from 0 to a larger value, and its padding from 0 to a desired amount. Coupled with overflow: hidden; and a transition property, this creates the expand/collapse animation.

JavaScript listens for clicks on the button, then finds the associated content div and toggles the .active class. It also updates the aria-expanded attribute for accessibility and changes the button's visual indicator (like the '+' or '-' sign).

Benefits:

• Saves screen space, especially on mobile devices.
• Reduces cognitive load by showing only essential information.
• Improves readability by breaking down large content blocks.

Considerations:

• Users might miss hidden content if not clearly indicated.
• Excessive use can lead to "click fatigue".
• Ensure accessibility with appropriate ARIA attributes.

This is a third example to show multiple independent widgets.