Плавный аккордеон

Высота анимируется к натуральной через grid-template-rows 0fr→1fr — без max-height хаков.

Кликайте вопросы.

Через трюк grid-template-rows: 0fr → 1fr. Высоту содержимого не нужно измерять в JS — грид сам анимирует к натуральной высоте.

height:auto не анимируется. А grid-rows — анимируется, и это единственный чистый CSS-способ без магических max-height.

Да — уберите строчку, закрывающую соседей. В демо открыт только один: так спокойнее читается.

Код

<div class="item open">
  <button class="q">Вопрос <i>+</i></button>
  <div class="a"><div class="inner">Ответ…</div></div>
</div>

<style>
/* секрет плавной высоты — grid-rows 0fr → 1fr */
.a { display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .5s cubic-bezier(.16,1,.3,1); }
.item.open .a { grid-template-rows: 1fr; }
.inner { overflow: hidden; }        /* обязателен! */
.q i { transition: transform .4s; }
.item.open .q i { transform: rotate(45deg); }   /* + превращается в × */
</style>

<script>
document.querySelectorAll(".q").forEach(function (btn) {
  btn.addEventListener("click", function () {
    var it = btn.parentElement;
    var was = it.classList.contains("open");
    document.querySelectorAll(".item").forEach(function (o) {
      o.classList.remove("open");
    });
    if (!was) it.classList.add("open");
  });
});
</script>

Промпт для ИИ

Сделай плавный аккордеон без измерения высоты: обёртка ответа display:grid с grid-template-rows: 0fr и transition 0.5s cubic-bezier(0.16,1,0.3,1); открытому пункту — 1fr; внутреннему блоку обязательно overflow:hidden. Грид анимирует к натуральной высоте контента — никаких max-height хаков. Иконка «+» поворачивается на 45° в «×». JS: клик открывает пункт и закрывает соседей.