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

🌐 Наш сайт: codelab.pro/
💬 Группа в Telegram: t.me/codelab_channel
------------------------------
📋 Кратко, о чем это видео
В этом видео мы напишем свой аккордеон на чистом JS. Важная особенность в этом аккордеоне - при раскрытии его высота подстраивается под высоту контента. Также мы сделаем анимацию при раскрытии - аккордеон будет раскрываться плавно, также добавим анимацию иконки.
------------------------------
📌 Полезные ссылки
Готовый код из видео ➝ codelab.pro/prostoe-burger-me...
Стартовый проект на GitHub ➝ github.com/toni-wheel/youtube...
------------------------------
🕒 Таймкоды из видео
0:00 Демонстрация примера
0:29 Делаем разметку аккордеона
1:21 Стилизация аккордеона
6:26 Пишем скрипт для аккордеона
------------------------------
💙 Поддержать меня и мой канал
Yandex деньги ➝ yoomoney.ru/to/4100116765956607
Qiwi кошелек ➝ qiwi.com/n/CODELAB

[@XTERIAN]

Спасибо большое за урок!

[@_Fantom_.]

Спасибо, классный урок!

[@elenatitlyanova]

классное объяснение, спасибо!

[@DoniDevFull]

Спасибо большое!!

[@mrbig8644]

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

[@andriichornyi9143]

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

[@justfisher2920]

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

[@checklifehack]

А если человек хочет открыть всё и сделать скрин лол

[@Nebogr]

Привет, у меня всё получилось.

[@degler2]

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

[@user-sz6if5go9g]

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

[@codelab_channel]

Спасибо большое, есть канал на дзен zen.yandex.ru/id/6204203ddfde8175b0ef7d10. Скоро анонсирую канал на rutube

[@user-sz6if5go9g]

@@codelab_channel 👍

[@_Fedor71]

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

[@fedorfedor281]

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

[@codelab_channel]

Исходный код из урока с подробным объяснением: codelab.pro/prostoe-burger-menyu-na-chistom-javascript/

[@YanOlimov]

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

[@Roman197634]

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

[@user-er5be2cm7y]

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

[@mrbig8644]

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

[@mrbig8644]

Все, нашел очепятку, спасибо все работает)))