HTMLElement: свойство hidden

Свойство HTMLElement отражает значение атрибута элемента hidden.

Этот атрибут может иметь одно из трех значений:

true

Элемент скрыт.

false

Элемент не скрыт. Это значение по умолчанию для атрибута.

"until-found"

Элемент скрыт до обнаружения, что означает, что он скрыт, но будет показан, если будет найден в результате поиска на странице или будет достигнут по фрагменту навигации.

Подробные сведения об использовании этого атрибута см. на странице атрибута HTML hidden, который отражает это свойство.

Вот пример, где скрытый блок используется для отображения сообщения «Спасибо», которое отображается после того, как пользователь согласится с необычным запросом.

HTML содержит два блока: блок приветствия, в котором пользователей просят согласиться быть крутыми, и последующий блок, который изначально скрыт.

<div id="welcome" class="panel">
  <h1>Welcome to Foobar.com!</h1>
  <p>By clicking "OK" you agree to be awesome today!</p>
  <button class="button" id="okButton">OK</button>
</div>

<div id="awesome" class="panel" hidden>
  <h1>Thanks!</h1>
  <p>Thanks for agreeing to be awesome today!</p>
</div>

Контент стилизован с помощью CSS ниже.

.panel {
  font:
    16px "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
  border: 1px solid #22d;
  padding: 12px;
  width: 500px;
  text-align: center;
}

.button {
  font:
    22px "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
  padding: 5px 36px;
}

h1 {
  margin-top: 0;
  font-size: 175%;
}

JavaScript добавляет обработчик события к кнопке «OK», который скрывает блок «Приветствие» и отображает блок «Круто»:

document.getElementById("okButton").addEventListener(
  "click",
  () => {
    document.getElementById("welcome").hidden = true;
    document.getElementById("awesome").hidden = false;
  },
  false,
);

• атрибут hidden
• display