Кнопки для скрытия и показа элемента на JavaScript

В данном разделе мы научимся скрывать и показывать элементы страницы. Как обычно, начнем с чего-то простого, и будем постепенно усложнять.

Пусть для разминки у нас есть абзац и две кнопки:

html<p id="elem">text</p>
<input type="submit" id="show" value="show">
<input type="submit" id="hide" value="hide">

Получим ссылки на наши элементы в переменные:

javascriptlet elem = document.querySelector('#elem');
let show = document.querySelector('#show');
let hide = document.querySelector('#hide');

Давайте теперь сделаем так, чтобы по клику на одну кнопку наш абзац скрывался, а на другую - показывался. Будем для этого давать или убирать элементу соответствующий CSS класс:

css.hidden {
  display: none;
}

Решим нашу задачу:

javascripthide.addEventListener('click', function() {
  elem.classList.add('hidden');
});

show.addEventListener('click', function() {
  elem.classList.remove('hidden');
});