Example 1: Native details/summary
Project Overview
This section uses the built-in HTML <details> and <summary> elements. It requires no JavaScript and is accessible out of the box.
- Toggle via mouse, keyboard, or touch.
- Preserves user state across page refreshes in some browsers.
- Can be styled to fit your design system.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Curabitur dictum nisl sed mauris bibendum, nec aliquam augue tempor.
Example 2: Button-controlled content
This area is controlled by a button that updates aria-expanded and the visibility of the content.
Use this approach when you need custom controls, analytics hooks, or animations.
- Works across browsers without relying on
<details>. - Fully customizable behavior.
- Simple to integrate with frameworks.
Example 3: Animated expand/collapse
This panel uses a simple CSS grid-based animation for a smoother open/close experience.
Animation is optional and progressively enhances the base behavior.
Note: When collapsing, the content is visually animated and then hidden for semantics.