UI-компоненты №9. Создание аккордеона (через details, на чистом js и анимированный)

[@vyacheslav-polaris]

Контент - мясо!! Не овощи всяких беззубых обучалок, а настоящее мясо контента! Спасибо!

[@maxgraph]

Пожалуйста)

[@lordminecraft3905]

Спасибо тебе огромное за твой контент. Именно ты вывел мою верстку и разработку в целом на новый уровень. Это позволило мне брать заказы намного дороже и больше, что позволяет мне, как студенту не зависеть от родителей. Знай, ты приложил к этому свою руку. Спасибо большое еще раз!

[@maxgraph]

Спасибо! Очень круто))

[@dkyshka2436]

Задонать ему хоть какую то часть в качестве благодарности.

[@ВадимЛюманов]

Спасибо за полезный видеоурок - создание анимированного аккордеона было для меня довольно крупной проблемой. Из решений, которые встречал, было много корявых и работающих через раз. Там были и танцы с абсолютным позиционированием, и с паддингами и маржинами... и еще бог знает с чем)) А тут пара новых приемов - и все достаточно просто. Надо почитать про will-change побольше. Оч. познавательный контент.

[@МаксимХлипитько-т1н]

Спасибо Вам за качественный и понятный контент.

[@maxgraph]

Пожалуйста)

[@evgeniiKlo]

Здоровья тебе, добрый человек!

[@development76]

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

[@nihongo_]

Спасибо за информацию! 🤓

[@sanchopance8044]

Ура, видос по любимой рубрике!

[@maxgraph]

Хех)

[@василий-е5м4х]

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

[@Denik-is6gi]

Многие снимают видео про верстку. Но почему то никто особо и не уделяет внимания доступности и семантики. Пока вроде только у вас и у Макеева видел чтобы не оставляли этого в стороне. Спасибо вам за такие уроки!!

[@maxgraph]

Пожалуйста)

[@anatolyannenko1821]

кстати для контента с классом open можно в css прописать max-height: fit-content;

[@ShizamStudio]

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

[@miraigrafit7865]

Круто, спасибо за ролик!

[@maxgraph]

Пожалуйста)

[@ИгорьКим-й4л]

Здравствуйте Максим, подскажите пожалуйста как в вашем примере сделать так что бы при клике на один аккордеон закрывались второй ?

[@ЗамирБарсаев]

Не подскажете, как закрывать оба элемента?

[@andyhadson8278]

Спасибо!! использовал у себя в проекте ☺

[@maxgraph]

Пожалуйста)

[@sartjhon3300]

Сегодня, когда поддержка details уже 97%, ради доступности сео и тд и тп, стоит ли использовать кастомные аккордеоны или все же details?

[@maxgraph]

Конечно, ради доступности стоит

[@ruchnaya_klad_konst]

Спасибо за ваши объяснения! После ваших видео все работает))хотела уточнить только, первый вариант с summary он чем отличается? тем, что нельзя сделать transition тд?? то есть его нельзя приукрасить?

[@maxgraph]

Пожалуйста) да, первый вариант топорный, нельзя модифицировать под себя как надо, анимировать

[@Игорь-ц1т3ж]

Спасибо за видео!! Супер

[@maxgraph]

Пожалуйста)

[@alexeyponomarev3241]

Супер! Спасибо! :)

[@maxgraph]

Пожалуйста)

[@olgapedashenko3930]

Вот как раз кода, который закрывает ненужный аккордеон, и не хватает 😢

[@Игорь-ц1т3ж]

Подскажите пожалуйста, в чем может быть ошибка- сделал все по видео, класс добавляет только к .accordion

[@maxgraph]

Не могу сказать наугад, надо смотреть

[@skrumy6062]

Максим, а как ты изучал js? Может посоветуешь какие-то курсы, сайты, книги?

[@maxgraph]

Курсы не буду рекламить)) учил сам по learn.javascript.ru и на курсах

[@skrumy6062]

@@maxgraph ок, спасибо)

[@СашаЯшурин]

Спасибо за видео, очень интересно! Будет ли видео про 3D картинки на сайте, очень интересно как это реализовать?

[@maxgraph]

Что такое "3D картинки"?)

[@СашаЯшурин]

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

[@maxgraph]

А есть пример?)

[@СашаЯшурин]

@@maxgraph да к примеру на сайте bmv можно машину покрутить как внутри так и снаружи!

[@peterparker3794]

Спасибо! И еще более семи слов, чтобы помочь в продвижении канала :)

[@maxgraph]

Пожалуйста)

[@miraigrafit7865]

Нужно еще аккордеон в аккордеоне попробовать xd

[@maxgraph]

Не)

[@Steve-ld2fb]

Анімувати потрібно тільки transform і opacity, тоді анімація плавна буде, а при анімації margin, padding, width, height, top, left і тд, анімація рвана

[@maxgraph]

Все верно. Но это другой случай

[@Steve-ld2fb]

то акордеон ніхто не робить анімувавши чисто трансформ? Я тільки й бачу як всюди хейт анімують

[@anatolyannenko1821]

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

[@maxgraph]

В России нет закона про это, если это не гос компания, насколько я знаю

[@alexandrgusletsov2567]

19: 10 accardion animate

[@ВадимЯковенко-я1в]

caniuse.com/details - если считать, что ИЕ уже труп, то очень даже интересно)

[@egorrublev5529]

спасибо мен