Как сделать развертывание аккордеона плавным?

Для создания плавного развертывания аккордеона в JavaScript, вы можете использовать CSS-свойство transition и добавить его в коде аккордеона.

Первым шагом будет добавление CSS-свойства transition для элементов аккордеона, которые будут разворачиваться/сворачиваться. Самыми распространенными элементами являются заголовок и содержимое каждого элемента аккордеона.

Например:

.accordion-header, .accordion-content {
  transition: max-height 0.2s ease;
}

Здесь мы добавляем плавную анимацию для свойства max-height с использованием transition. Значение 0.2s указывает на время, за которое произойдет анимация, а ease отвечает за плавное изменение скорости анимации.

Вторым шагом будет добавление JavaScript-кода, который будет изменять значение max-height элементов аккордеона для развертывания/сворачивания.

Например:

const accordionHeaders = document.querySelectorAll('.accordion-header');

accordionHeaders.forEach(header => {
  header.addEventListener('click', () => {
    const accordionContent = header.nextElementSibling;
    
    if (accordionContent.style.maxHeight) {
      accordionContent.style.maxHeight = null;
    } else {
      accordionContent.style.maxHeight = accordionContent.scrollHeight + 'px';
    }
  });
});

Здесь мы добавляем обработчик события клика на каждый заголовок аккордеона. При клике мы проверяем, установлено ли значение max-height для содержимого аккордеона. Если да, то мы удаляем его, чтобы свернуть содержимое. Если значение не установлено, то мы устанавливаем его равным значению scrollHeight элемента, чтобы развернуть содержимое.

Заказчик может изменить CSS-свойства transition и время анимации в зависимости от своих предпочтений. Он также может настроить JavaScript-код для аккордеона в соответствии с его потребностями, например, добавить дополнительные анимации или действия при разворачивании/сворачивании аккордеона.

Надеюсь, эта информация помогла вам понять, как реализовать плавное развертывание аккордеона с помощью JavaScript и CSS. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их!