Создание простого аккордеона на JS

[@MakewebMeOfficial]

⚛⚛⚛ Пройди практический курс "Javascript Fullstack разработчик" от MakeWeb.me. Детали тут: makeweb.me/course-js-fullstack-developer Телеграм для связи по курсу: @makewebchatme

[@grantchobanyan7943]

спасибо за подробное объяснение! мелкие отхождения от основной темы очень кстати, учат новому!

[@mykhailo_shokun]

спасибо, все очень доступно и ясно, для первого JS-аккордеона то, что надо;)))

[@ДмитрийХуторов-д6с]

Огромное спасибо, объяснение супер! Лайк, подписка, автору "+" в карму

[@romanturaev9631]

Спасибо за урок. Очень помогло. Хотелось бы еще спросить а как можно добавить в правую часть accordeon-header какую-то картинку svg (например плюсик) и при открытии эту картинку менять на другую картинку svg (например крестик)?

[@MakewebMeOfficial]

В двух словах и не скажешь.- лучше такие вопросы в нашем чатике в ТГ задавать

[@Roman197634]

@@MakewebMeOfficial Присоединился к Тг каналу. Завтра подумаю как вопрос по аккордеону сформулировать. Спасибо.

[@denvudd4492]

как сделать чтобы можно было закрывать вкладку?

[@amirych]

А почему бы не искать все секшионы, а не конкретный ('.accordeon-section.opened')?

[@MakewebMeOfficial]

Да, так тоже можно.

[@MAZAJKA174]

Мне кажется что проще было сделать через scrollHeight

[@amirych]

Ul>li надо)

[@MakewebMeOfficial]

Да, так тоже можно.

[@LuckyLucky-vq5lt]

👍👍👍

[@loremipsum353]

еще бы 'use strict' и const вместо var

[@MakewebMeOfficial]

Толковое предложение. В следующих роликах пепейдем на ES6 со сборкой через WebPack.

[@lomeat]

@@MakewebMeOfficial но ведь es6 поддерживается из коробки нодой и браузерами, зачем сборщик или транспайлер?

[@wswebus922]

Спасибо за видео, но у меня вопрос. Зачем записывать видео что бы показать как сделать плохой аккордеон? Почему сразу не сделать хороший, переиспользуемый, правильный аккордеон? Это бы заняло те же 19 минут, но в головах не осталось бы этого мусора который есть сейчас

[@MakewebMeOfficial]

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

[@wswebus922]

@@MakewebMeOfficial Прекрасно понимаю вас. Но вы потратили больше часа-двух на создание этого видео что бы показать как не надо делать? А новички будут впитывать эти знания и применять их в продакшене :) А потом так сложно их переучивать. Тратьте время на более полезные уроки. Аккордеон - очень интересный компонент и хотелось бы иметь видео как сделать аккордеон готовый к продакшену. Что бы не стыдно его было в репозиторий поставить и переиспользовать от проекта к проекту :)

[@vovergg]

@@wswebus922 Позволю не согласиться с тем, что трудно переучивать, когда человек хорошо разобрался и понял на таких вот примерах базовые вещи в javascript (что, как я понял, и является целью этого и подобных роликов). Гораздо сложнее переучивать, если человек бездумно заучил пусть даже идеальные решения, но вдруг что-то пошло не так...

[@wswebus922]

@@vovergg Всегда хорошо иметь разные мнения :) Но я за качественный и полезный контент

[@TsA1ex]

Ох нагородили. Лучше бы на jQuery в 3 строки типовое решение написать. Потому как сейчас много минусов. Работает ли это решение на мобильном? Верстальщик обязательно должен знать, чтобы в содержимом блока был всегда один элемент, иначе всё накроется. Используется стиль в js. Если где то в css будет height или max-heigh или конфликтующие с ним свойства, то опять таки всё накроется. Ну и последнее, анимация очень непроизводительная, так как происходит перерисовку содержимого. Лучше бы поиграться с вариантом transform scale

[@justspartak]

Только библиотека jQuery уж точно не в 3 строки. Спрашивается, нахрена вам нужно столько лишнего кода, лишь для аккордеона?

[@justspartak]

Интерпретатор JS есть и на всех мобильных платформах. Поэтому, будет всё прекрасно поддерживаться.

[@wswebus922]

Интересно посмотреть как вы через transform: scale будете отодвигать все элементы на странице под аккордеоном. При открытии аккордеона все элементы снизу должны сдвигаться.

[@MakewebMeOfficial]

Видео не ставит задачи сделать адаптацию, поддержку мульти-инстансов и кроссбраузерности. Об этом сказано. Это абстрактный пример в вакууме, в котором запечатлен процесс мышления. В этом предполагаемая ценность. Использовать такоеина продакшене ни в коем случае нельзя. Планируется продолжение для каждого ролика серии, где постепенно компоненты будут модифицироваться и приводиться к более приемлемому виду.

[@MakewebMeOfficial]

@@justspartak решение там будет компактнее, но можно достаточно быстро написать свой легковеснейший jQuery с тем же API и только необходимыми методами.. И это, кстати, хорошая идея для будущих выпусков.

[@bogdankabanovprof]

Лайк

[@mainName777]

гавно код)