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

Привет! Давно хотел сделать рубрику, где буду большое внимание уделять не целым страницам, а ее деталям. Так, как мне кажется, удобнее для восприятия и видно больше мелочей.
В связи с этим, сделал новую рубрику UI-компоненты, которая будет посвящена разным реализациям с различных сайтов, которые часто встречаются.
Здесь я буду стараться сделать универсальную верстку, чтоб данный компонент можно было внедрить на сайт без проблем. Также можно не беспокоиться и за сборщики/препроцессоры и прочие нюансы - здесь я пишу на чистых языках - html, css, js.

В этой части я сделаю три вариации доступного аккордеона - с помощью тегов details и summary, на чистом js (без анимации), и на чистом js с анимацией.

Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.

#ityoutubersru #ui_компоненты #верстка

[vyacheslav-polaris]

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

[lordminecraft]

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

[vjhjjkb]

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

[kmmnljf]

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

[andyhadson]

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

[peterparker]

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

[anatolyannenko]

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

[development]

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

[Denik-isgi]

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

[qpsftxk]

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

[ruchnaya_klad]

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

[miraigrafit]

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

[ShizamStudio]

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

[urvvevx]

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

[hxschck]

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

[skrumy]

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

[ulmrzex]

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

[sartjhon]

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

[gpzxxur]

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

[Steve-ldfb]

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