Всем привет! Недавно на работе была таска, которая была связана с фиксом реализации компонента Accordion (вот визуальный пример, кто не знает, что это)

Кажется, что этот Accordion максимально простая вещь. Это то да, но его правильная реализация (с анимацией) делается не через CSS, а через JavaScript и функцию requestAnimationFrame, которую предоставляет браузерное API.

Достаточно неплохое решение я нашел здесь. Настоятельно рекомендую разобрать пункт “Technique 3: JavaScript”. Это уровень J+, Middle, но и вам, дорогие джунники, будет очень полезно 🙂

—————————

Проблема в таске на работе была как раз в реализации этого Accordion. Он был реализован по пункту “Technique 1: max-height” из статьи по ссылке выше и это вызвало багу в нашем проекте. Поэтому пришлось капаться и разбираться в более правильной реализации Accordion.

Как вам кстати решение из статьи? Разобрались, как оно работает? Если нет, то давайте вместе разбираться 😉