JS Toggle: интерактивность в веб-разработке

JS Toggle - это функция, которая позволяет изменить состояние элемента на странице, то есть скрыть или отобразить его при клике на определенный элемент. Эта функция часто используется на сайтах для создания интерактивности и улучшения пользовательского опыта.

Пример кода на JS Toggle:

HTML:

Нажми меня

  
Скрытый текст

CSS:

.toggle-content {
  display: none;
}

JS:

const toggleBtn = document.querySelector('.toggle-btn');
const toggleContent = document.querySelector('.toggle-content');
toggleBtn.addEventListener('click', function() {
  if (toggleContent.style.display === 'none') {
    toggleContent.style.display = 'block';
  } else {
    toggleContent.style.display = 'none';
  }
});

В этом примере мы создаем кнопку, которая будет переключать состояние скрытого контента при клике на нее. По умолчанию, контент скрыт с помощью CSS свойства `display: none;`.

В JS мы используем метод `document.querySelector()` для выбора кнопки и контента. Затем, мы добавляем обработчик событий `addEventListener()`, который будет вызывать функцию при клике на кнопке. Внутри функции мы проверяем текущее значение свойства `display` у контента. Если оно равно `'none'`, то мы меняем его на `'block'` (то есть отображаем контент). Если значение уже равно `'block'`, то мы скрываем контент с помощью `'none'`.

Это простой пример JS Toggle, который можно легко настроить и использовать на любом сайте.