Создаем аккордеон на JS за 10 минут

––––––––––––––––––––––––––––––

📋 Кратко, о чем это видео

В этом видео мы напишем свой аккордеон на чистом JS. Важная особенность в этом аккордеоне - при раскрытии его высота подстраивается под высоту контента. Также мы сделаем анимацию при раскрытии - аккордеон будет раскрываться плавно, также добавим анимацию иконки.

––––––––––––––––––––––––––––––

📌 Полезные ссылки

––––––––––––––––––––––––––––––

🕒 Таймкоды из видео

0:00 Демонстрация примера
0:29 Делаем разметку аккордеона
1:21 Стилизация аккордеона
6:26 Пишем скрипт для аккордеона

––––––––––––––––––––––––––––––

💙 Поддержать меня и мой канал

[mrbig]

А можно как то сделать так, чтобы при открытии следующего бокса, предыдущий закрывался?

[justfisher]

Классный урок! Сделал бы эффект при открытии одного, закрытие следующего, пользователю не всегда удобно когда открыты все

[degler]

Блин все хорошо, но ушло 11:51 минуты , видео мне не помогло в конкретном примере, но натолкнуло на мысль, за что огромное спасибо.

[andriichornyi]

Аккордион "пионерский": при клике на текст будет меняться значек "+" на "-", и потом уже аккордион не закроешь, надо кликать два раза. Не профессиональный код. Не ".box", a ."label" надо использовать: var boxes =

[_Fedor]

Здравствуйте, при клике по контенту консоль выдает ошибку.

[szifgog]

Чувак, у тебя лучшие уроки по верстке и js. Есть большая вероятность, что ютуб заблокируют. Есть ли альтернативные каналы у тебя?

[fedorfedor]

Автор, подскажи пожалуйста, как сделать, чтобы они были открыты изначательно.

[Roman]

А как теперь сделать чтоб первый бокс при загрузке был уже открытым?
И присоединюсь к вопросу "как сделать чтоб при клике на следующий бокс, предыдущий закрывался"?
Спасибо.

[YanOlimov]

Привет. Если контент пустой, то как сделать проверку? Что бы он не ломался при раскрытии и убирался плюс?

[erbecmy]

привет
сможешь помочь с js, создаю по твоему ролику галерею и не работает 15 строчка, что делать?

[mrbig]

Ничего не работает, просто добавляет класс Актив на бокс и на контент max-height 0px; сделал один в один, проверил каждую строчку 8 раз пересмотрел видео