JavaScript · Lesson 3 of 4

Show your introduction with a click

hidden controls whether an element is hidden. ! reverses the value: a hidden element appears, then disappears on the next click.

Your task

Run the code, then click twice to show and hide the introduction.

Each new lesson builds on your personal page. Your saved lesson draft opens when you return.

Choose an image from your computer

The image stays in your browser. Choose it before running; its filename replaces the example filename.

        JavaScript · script.jsdocument.getElementById("toggle")
  .addEventListener("click", () => {
    const details = document
      .getElementById("details");
    details.hidden = !details.hidden;
  });
        Edit your project HTML and CSS
            HTML · index.html<button id="toggle">Show my introduction</button>
<p id="details" hidden>I’m Sara, and I’m learning to build websites.</p>
            CSS · style.cssbody { font-family: sans-serif; padding: 16px; color: #12211f; background: #fcfbf7; } h1 { font-size: 24px; } button { font: inherit; padding: 6px 12px; color: #fff; background: #0c4b3c; border: 0; border-radius: 6px; cursor: pointer; }
        
    

Your page

Checks use your current code. Try the page yourself too.

Can you explain what the second click does? Combine these ideas in your project.

Next: Project: interaction

I need help

We select the toggle button and details paragraph. If nothing appears, compare those IDs with the HTML under “More explanation”.

More explanation

Save the page to your computer

Download the HTML file

If the download does not start, copy the complete code below into a text file named index.html and save it as UTF-8.

Complete code to save

Your task

Your page

Your feedback