Rozdział 3 · Zadanie 10

Pokaż / ukryj blok

Sterujemy widocznością bloku na stronie jednym przyciskiem.

Zadanie

Dodaj w <body>:

script-demo.html

<button onclick="toggleBlock()">Pokaż/ukryj</button>
<div id="secret" style="display: none;">To ukryty tekst!</div>

A w script

Dodaj funkcję:

script-demo.html

function toggleBlock() {
  let block = document.getElementById("secret");
  if (block.style.display === "none") {
    block.style.display = "block";
  } else {
    block.style.display = "none";
  }
}

Jak to czytać

display: none; — element całkowicie znika ze strony. Funkcja sprawdza obecny stan i przełącza na przeciwny.

Kurs powstał dzięki wsparciu biura rachunkowego Galakton, Białystok, Polska