Intermediate
Build an accessible show/hide button
Make the Shipping details button show and hide the panel, and tell assistive tech what's happening:
1. The button starts with aria-expanded="false" and aria-controls="panel", and the panel starts hidden (use the hidden attribute).
2. Each click toggles the panel and sets aria-expanded to "true" or "false" to match.
What Check tests
- The toggle is still a real
<button> - It starts collapsed:
aria-expanded="false"and the panel is hidden - The button points to the panel with
aria-controls - One click opens the panel and sets
aria-expanded="true" - A second click closes it again and sets
aria-expanded="false"
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.