React · Exercise 1 of 5Next
Beginner
Show and hide the details
The button has id="toggle". At the start it says Show details and no details are on the page.
Clicking it shows a paragraph with id="details" (any text) and changes the button to Hide details. Clicking again removes the paragraph and the button says Show details again.
Give the button aria-expanded set to true while the details are shown and false while they are hidden, so screen readers know.
What Check tests
- It starts with
Show detailsand no details - One click shows
#detailsand the button saysHide details - While open, the button has
aria-expanded="true" - A second click removes the details and resets the button
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.