Анимированный аккордеон, как в Bootstrap 5, пишем сами. Все фишки!

YOUTUBE · 01.12.2025 09:35

Ключевые темы и таймкоды

Создание плавного появления контента и активной вкладки

0:00
  • В видео демонстрируется создание плавного появления контента и активной вкладки в аккордеоне с использованием минимального количества кода.
  • Аккордеон состоит из трех вкладок, каждая из которых имеет свой заголовок, контент и стиль.

Работа со стилями и создание активных вкладок

3:58
  • В видео подробно объясняется, как использовать переменные для изменения цвета и стиля аккордеона в соответствии с дизайном.
  • Аккордеон имеет свойство display: flex, что позволяет расположить элементы в колонке и задать им определенную ширину.
  • Вкладки имеют свойство display: flexbox, что позволяет расположить их по разные стороны и задать им выравнивание по центру.
  • Аккордеон также имеет свойство box-shadow для создания тени на активной вкладке.

Создание плавного поворота плюсика и крестика

7:54
  • В видео объясняется, как создать плавный поворот плюсика и крестика при активной вкладке.
  • Аккордеон использует свойство transform для поворота элементов на 45 градусов, а затем возвращается к нулевому градусу.
  • В видео также демонстрируется, как использовать свойство first-child для удаления рамки сверху и снизу на каждой вкладке.

Работа с контентом

8:53
  • В видео автор объясняет, как скрыть и показать контент с помощью свойства max-height.
  • Он также объясняет, как задать свойства для скрытия и показа контента через свойства isobility и transition.

JavaScript

11:50
  • Автор объясняет, как найти все заголовки и контенты с помощью JavaScript, а затем перебирает их, чтобы найти активный контент.
  • Он также объясняет, как использовать свойства site и dataset для определения высоты контента и добавления класса Active.

Оптимизация кода

14:46
  • Автор оптимизирует код, добавляя функции для активации определенной вкладки при загрузке страницы.
  • Он также объясняет, как найти активную вкладку через атрибуты данных и добавить класс Active к соответствующему контенту.