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

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

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

`<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'); });`

Модифицируйте мой код так, чтобы была только одна кнопка. Пусть по первому клику на эту кнопку элемент показывается, а по второму - скрывается.

←→
↑
en ru