Expand/Collapse Widgets

Each example below is wrapped in a div.example. The controlled content container uses the details class. Buttons include ARIA attributes for accessibility.

Widget A: FAQ item

This is a simple expand/collapse component using a button to toggle a content panel. The button updates aria-expanded and the panel uses role="region".

Tip: Press Tab to focus the button, then press Enter or Space.

Widget B: Filters panel

In stock Free shipping New arrivals

Widget C: Multiple sections

Common items:

Keyboard navigation
Animated height and opacity
ARIA state sync

You can use the same pattern for multiple panels. Each button targets a unique div.details via aria-controls.