#заметка дня Во времена расцвета jQuery реализация аккордеона | Будни разработчика

#заметка дня

Во времена расцвета jQuery реализация аккордеона — набора раскрывающихся блоков — укладывалась в метод slideToggle. Одна-две строчки – и готово.

Сейчас же jQuery не в почёте, а CSS Transitions не дают нам возможности анимировать высоту от 0 до auto. Браузеру не известна высота блока до того, как блок будет отображён. Так какой же выход из ситуации?

Чтобы это понять, надо сначала осознать, как когда-то с этим справлялась jQuery.

А она всего лишь производила кучу вычислений прямо перед вашими глазами: показывала блок, рассчитывала высоту контента, сохраняла, ставила в ноль и изменяла значение высоты блока используя заданную функцию плавности.

Комбинируя это знание с тем фактом, что CSS не может анимировать высоту до auto, в голову сразу приходит несколько решений.

1. Установка transition на max-height, вместо height. От 0 до абсурдно большого значения. Плюсы — можно вообще JS не писать. Минусы — если сильно ошибся с предполагаемой высотой, функция плавности сойдёт с ума.

2. Считать scrollHeight и анимировать до него. Собственно, фактически то же самое, что делал jQuery. Плюсы: полный контроль над происходящим Минусы: без JS работать не будет (в самом популярном случае вы просто оставляете аккордеон раскрытым).

3. Ну мы же в 2021 году, есть пользовательские свойства! Устанавливаем значение свойства равным высоте scrollHeight, как во втором случае, и дело в шляпе: https://codepen.io/alinaki/pen/OJWqXGV Плюсы: минимальный объём кода, минусы — поддержка пользовательских свойств в вашем таргете может отсутствовать. Зато если поддержки нет или JS выключен — анимации просто не будет.

А чтобы всё это было доступно с клавиатуры — не забываем применить технику «визуального скрытия (visually hidden)» на чекбоксы и установить лейблу стили для фокуса.

#css #customproperties #accordion