При первом нажатии на кнопку анимация не срабатывает?

Question

[Диас Галымбек]

Вот логика функции. То-есть при каждом нажатии на табов рендерится новый HTML и вещается обработчик.

function render(groups, name) {
  const group = groups[name];
  const students = group.students;
  let studentsHTML = "";

  for (const key in students) {
    const student = `
		<div class="student">${students[key].name}</div>
	`;

    studentsHTML += student;
  }

  const HTML = `
		<h2 class="name">${group.name}</h2>
		<button class="accordion-btn">Скрыть</button>

		<div class="accordion">
			<div class="description">
			${group.description}
			</div>

			<div class="students-box">
				<h3 class="caption">Студенты</h3>
				<div class="students">
					${studentsHTML}
				</div>
			</div>
		</div>
	`;

  groupInfo.innerHTML = HTML;

  const accordionBtn = document.querySelector(".accordion-btn");
  accordionBtn.onclick = () => {
    const accordion = accordionBtn.nextElementSibling;

    if (accordion.classList.contains("hidden")) {
      accordion.style.maxHeight = accordion.scrollHeight + "px";
      accordion.classList.remove("hidden");

      accordionBtn.textContent = "Скрыть";
    } else {
      accordion.style.maxHeight = 0;
      accordion.classList.add("hidden");

      accordionBtn.textContent = "Показать";
    }
  };
}

Единственная проблема это при первом нажатии не срабатывает анимация, то-есть transition. Как это пофиксить?

Answer 1

[Юра Комаров]

Вот примерно думаю такая же анимация раскрытия блока аккордеона
https://codepen.io/Yurajun/pen/gOBdKzL
Тут в setTimeout присваиваем желаемую высоту, так как нужно чтоб прошел один тик между height 0 и height новая высота