classList: переключение оформления

Основная идея

ClassList управляет классами элемента без ручного разбора строки className. Add добавляет класс, remove удаляет, toggle переключает. Это удобно, когда поведение написано на JavaScript, а внешний вид остаётся в CSS.

Второй аргумент toggle позволяет задать состояние явно. Для раскрывающей кнопки не ограничивайтесь классом: обновляйте aria-expanded и доступность связанной области. Визуальное изменение должно соответствовать тому, что видят вспомогательные технологии.

Пример JavaScript

const button = document.querySelector("[data-toggle]");
const panel = document.querySelector("[data-panel]");
button?.addEventListener("click", () => {
  if (!panel) return;
  const open = button.getAttribute("aria-expanded") !== "true";
  button.setAttribute("aria-expanded", String(open));
  panel.hidden = !open;
  button.classList.toggle("is-open", open);
});

Пример ожидает начальное aria-expanded=»false» у кнопки и hidden у панели. После клика оба состояния меняются согласованно.

Частая ошибка

Самостоятельная проверка

Создайте кнопку и скрытую область с соответствующими data-атрибутами. Проверьте два последовательных открытия и закрытия.

Код здесь показан для изучения. Встроенная песочница сайта выполняет только HTML/CSS. JavaScript проверяйте в собственном учебном файле или консоли своего тестового проекта; не вставляйте непонятный код на страницах с личными данными.

Следующие темы: события, поиск элементов.