🎯 Красивый спойлер на чистом JS

Стандартный стиль

Спойлер — это элемент интерфейса, который позволяет скрывать и показывать контент по клику. Это отличный способ организовать информацию и сделать интерфейс более компактным и удобным для пользователя.

При клике на заголовок спойлера, JavaScript плавно раскрывает скрытый контент. Анимация реализована через CSS transitions с настраиваемой длительностью и функцией плавности.

Все параметры спойлера можно настроить через CSS переменные, что делает компонент очень гибким и переиспользуемым.

Вы можете настроить следующие параметры через CSS переменные:

  • Размеры: ширина, высота заголовка, отступы
  • Закругления: border-radius для скругления углов
  • Цвета: фон, текст, иконка, границы
  • Анимация: длительность и функция плавности
  • Тени: обычная и при наведении

Темная тема

Этот спойлер использует темную цветовую схему. Все цвета можно легко изменить через CSS переменные в классе theme-dark.

Минималистичный стиль

Более компактный вариант с меньшими отступами и более быстрой анимацией. Идеально подходит для плотного размещения контента.