Как добавить анимацию к этому аккордеону?

Как анимировать появление горизонтального аккордеона плавно?
  • 3 июля 2024 г. 8:12
Ответы на вопрос 2
Для добавления анимации к аккордеону или анимации появления горизонтального аккордеона плавно, можно использовать CSS и JavaScript. Вот пример простого аккордеона с анимацией:

HTML:
```html
<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">Заголовок 1</div>
    <div class="accordion-content">Содержимое 1</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Заголовок 2</div>
    <div class="accordion-content">Содержимое 2</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Заголовок 3</div>
    <div class="accordion-content">Содержимое 3</div>
  </div>
</div>
```

CSS:
```css
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.active .accordion-content {
  max-height: 300px; /* высота контента */
}
```

JavaScript:
```javascript
document.addEventListener('DOMContentLoaded', function() {
  const accordionItems = document.querySelectorAll('.accordion-item');

  accordionItems.forEach(item => {
    const header = item.querySelector('.accordion-header');
    
    header.addEventListener('click', function() {
      if (item.classList.contains('active')) {
        item.classList.remove('active');
      } else {
        accordionItems.forEach(el => el.classList.remove('active'));
        item.classList.add('active');
      }
    });
  });
});
```

Этот скрипт будет добавлять/удалять класс `active` у элемента аккордеона при клике на заголовок, что вызовет анимацию появления контента. Вы также можете настроить CSS для создания плавного эффекта анимации (например, добавив `transition`).
Через добавление свойства max-width 0/100% 

transform 3d там вообще ни к месту
Похожие вопросы