Для добавления анимации к аккордеону или анимации появления горизонтального аккордеона плавно, можно использовать 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`).