Розділ 3 · Завдання 10

Показати / сховати блок

Керуємо видимістю блока на сторінці однією кнопкою.

Завдання

Додай у <body>:

script-demo.html

<button onclick="toggleBlock()">Показати/сховати</button>
<div id="secret" style="display: none;">Це прихований текст!</div>

І в script

Додай функцію:

script-demo.html

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

Як це читати

display: none; — елемент повністю зникає з сторінки (як завдання 10 з Розділу 2 нагадувало б, якби там був JS). Функція перевіряє поточний стан і перемикає на протилежний.

Курс створено за підтримки бухгалтерського бюро Galakton, Білосток, Польща