Details Toggle

componentseasy

10:00starts when you type

Guide

Challenge mode

# Requirements status

They are shown when you run the tests. Until then they appear as a hidden requirement.

Build a button that shows and hides a block of details. You practice boolean state and conditional rendering.

The complete interface: the button and the details paragraph.
Your job is the logic: know whether the details are open and react to the button.
Keep the texts Show details, Hide details and Here are the details: the tests use them.

At the start the details are hidden and the button says Show details.
When the button is pressed the paragraph Here are the details appears and the button changes to Hide details.
The button reports whether the details are open with aria-expanded.

You open the challenge → you only see the Show details button.
You press the button → you see the paragraph and the button says Hide details.

Hint 1

If something is open or closed, a boolean in useState is enough.

Hint 2

To show something only sometimes, use {condition && <element />}.

Hint 3

The button text also comes from that same state: you do not need another one.

App.jsx

Preview

The console is empty

Run your code with Ctrl+S

This console starts empty every time the preview loads. The browser's DevTools console keeps the messages with Preserve log.