React · Exercise 1 of 5Next
Intermediate
An accordion with one panel open
Each panel below keeps its own isActive state, so several can be open at once. Lift the state up so that exactly one panel is open at a time.
At the start the first panel is open. Clicking Show on another panel opens it and closes the one that was open.
Keep the markup: each panel is a <section className="panel"> with an <h3>; an open panel shows its text in a <p>, a closed one shows a <button>Show</button>.
What Check tests
- There are three panels
- At the start only the first panel is open
- Opening the second panel closes the first
- Opening the third panel closes the second
- Panel no longer keeps its own state
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.