Expand/Collapse Examples

An accordion is a vertically stacked list of items, such as labels or thumbnails. Each item can be "expanded" or "collapsed" to reveal the content associated with that item.

They are useful for reducing page scrolling and hiding information that isn't immediately necessary for the user. This improves the overall user experience by keeping the interface clean.

Common use cases include FAQs, product details, and navigation menus.

Native HTML5 <details>

This widget uses the native HTML5 <details> and <summary> tags. It works without JavaScript but animation support is limited in older browsers.