Как можно сделать так, чтобы аккордеон раскрывался плавно без резких переходов?

Есть несколько способов сделать аккордеон с плавным раскрытием без резких переходов:

1. Использование анимации CSS:
   - Добавьте CSS-свойство `max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out;` к контенту аккордеона.
   - При раскрытии аккордеона установите свойство `max-height` на нужное значение (например, `max-height: 400px;`).
   - Анимация будет плавно увеличивать высоту блока и создавать эффект плавного раскрытия.

2. Использование JavaScript:
   - В HTML-коде аккордеона добавьте класс `collapsed` к контенту, который должен быть скрыт.
   - В CSS добавьте стили для класса `collapsed`: `.collapsed { max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }`
   - Используйте JavaScript для удаления класса `collapsed` при клике на заголовок аккордеона и добавления его обратно при повторном клике.
   - Когда класс `collapsed` удален, контент будет плавно раскрываться благодаря анимации CSS.

Относительно создания аккордеона без использования свойства `display:none/block` и без перекрытия элементов друг другом, можно использовать следующий подход:

1. Использование CSS-трансформации:
   - Расположите контент аккордеона внутри контейнера с фиксированной высотой.
   - Установите контейнеру свойство `overflow: hidden;`.
   - При клике на заголовок аккордеона примените CSS-трансформацию `scaleY(0)` к контенту, чтобы его высота стала равной нулю.
   - При повторном клике примените трансформацию `scaleY(1)`, чтобы контент снова был видимым.

2. Использование маргинов:
   - Расположите контент аккордеона внутри контейнера, который имеет минимальную высоту.
   - Установите для контента свойство `margin-top: -100%` и `margin-bottom: -100%`, чтобы его невидимая часть была за пределами контейнера.
   - При клике на заголовок аккордеона изменяйте значение маргинов на `margin-top: 0` и `margin-bottom: 0`, чтобы контент стал видимым.
   - При повторном клике восстановите значения маргинов обратно на `margin-top: -100%` и `margin-bottom: -100%`, чтобы контент стал невидимым.

Оба подхода позволяют создать аккордеон без перекрытия элементов или использования свойства `display:none/block`. Выбор зависит от ваших предпочтений и требований к дизайну.

.panel {
  display: block;
  padding: 0 15px;
  font-size: 15px;
  line-height: 1.5;
  background-color: #B91C6B;
  border-radius: 0 0 16px;
  transition: all 0.4s;
  height: 0;
  overflow: hidden;
}

.faq-item.active .panel {
  padding: 15px 15px 20px;
}

.faq-item.active .cross {
  transform: rotate(45deg);
}

const containerSelector = '.faq-list';
const itemSelector = '.faq-item';
const headerSelector = '.accordion';
const contentSelector = '.panel';
const activeClass = 'active';

const onClick = ({ target: t }) => {
  const container = t.closest(containerSelector);
  
  if (!container) return;
  
  const items = container.querySelectorAll(itemSelector);
  
  items.forEach(function(n) {
    const state = n === this && !n.classList.contains(activeClass);
    const content = n.querySelector(contentSelector);
    n.classList.toggle(activeClass, state);
    content.style.height = `${state ? content.scrollHeight : 0}px`;
  }, t.closest(itemSelector));
};

document.addEventListener('click', onClick);