Toggle JS: добавьте интерактивность на ваш сайт без усилий

Toggle в JavaScript относится к функции, которая позволяет переключить состояние элемента в HTML странице между «состоянием включено» и «состоянием отключено». Это может быть полезным, если вы хотите избежать использования нескольких условных операторов или циклов, когда нужно быстро переключать какие-либо либо свойства. Вот пример использования функции toggle в JavaScript:

HTML разметка:

 html
Toggle me

  
This is the toggle content

JavaScript код:

 javascript
// Находим HTML элементы на странице через их ID
const toggleButton = document.getElementById("toggle-button");
const toggleContent = document.getElementById("toggle-content");
// Назначаем обработчик события клика на кнопку
toggleButton.addEventListener("click", function() {
  // Используем функцию toggle для переключения состояния скрытия и показа контента
  toggleContent.classList.toggle("hide");
});
// Добавляем класс скрытия на контент при первом загрузке страницы
toggleContent.classList.add("hide");

CSS стили:

 css
.hide {
  display: none;
}

В данном примере, когда мы кликаем на кнопку «Toggle me», вызывается функция, которая изменяет состояние элемента с ID «toggle-content». В CSS стиле мы определили класс «hide», который используется для скрытия элемента. И при помощи JavaScript мы добавляем или удаляем этот класс при нажатии на кнопку toggleButton. Это позволяет переключать состояние скрытия и показа контента без замены или удаления HTML элементов.