Анимированный аккордеон, как в 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 к соответствующему контенту.