мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

Кнопки для скрытия и показа элемента на 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'); });

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