Expand/Collapse Widget Showcase

Explore two variations of an accessible expand/collapse widget. Each example uses a button to toggle the visibility of a content container styled with the details class.

Example 1 — Checklist Reveal

Example 2 — Code Snippet Toggle

This snippet demonstrates a basic HTML structure for a content card:

<article class="card">
    <h3>Card title</h3>
    <p>Supportive text that elaborates on the headline.</p>
    <a href="#" class="button">Learn more</a>
</article>