Expand/Collapse Widgets

This page demonstrates accessible patterns for showing and hiding content.

Pattern 1: Native HTML Elements

Using the native <details> and <summary> elements. This is the preferred method for simple show/hide functionality as it handles accessibility semantics and keyboard interaction automatically.

Shipping Information

Standard shipping takes 3-5 business days. Expedited shipping is available at checkout for an additional fee.

View full shipping policy

Pattern 2: Custom ARIA Widget

Using button with aria-expanded and aria-controls. This pattern is necessary when you need more control over styling, animation, or state management than the native element provides.