В данном разделе мы с вами научимся скрывать и показывать элементы страницы. Как обычно, начнем с чего-то простого, и будем постепенно усложнять.
Пусть для разминки у нас есть абзац и две кнопки:
<p id="elem">text</p>
<input type="submit" id="show" value="show">
<input type="submit" id="hide" value="hide">
Получим ссылки на наши элементы в переменные:
let elem = document.querySelector('#elem');
let show = document.querySelector('#show');
let hide = document.querySelector('#hide');
Давайте теперь сделаем так, чтобы по клику на одну кнопку наш абзац скрывался, а на другую - показывался. Будем для этого давать или убирать элементу соответствующий CSS класс:
.hidden {
display: none;
}
Решим нашу задачу:
hide.addEventListener('click', function() {
elem.classList.add('hidden');
});
show.addEventListener('click', function() {
elem.classList.remove('hidden');
});
Модифицируйте мой код так, чтобы была только одна кнопка. Пусть по первому клику на эту кнопку элемент показывается, а по второму - скрывается.