Javascript анимация после действия не работает

Question

Я пытаюсь добавить эффект выпадающего меню на свой веб-сайт, но я не могу понять, что это правильно. Я хотел бы нажать на «+» и позволить форме развернуться, чтобы показать текст, поэтому после того, как я нажму «+», должна начаться какая-то анимация? Я новичок в javascript, и я хотел бы, чтобы кто-нибудь помог мне

http://severinereard.be/test/

Вот сайт, я только закончил мобильную версию так что его лучше всего просматривать в тонком окне браузера.

В первом разделе «Pelvi-périnéolog ie» я добавил абзац, который скрыл без отображения.

Надеюсь, этого достаточно информация

ОБНОВЛЕНИЕ: я добавил javascript, и он работает для первого раздела, но не для остальных. Я также хотел бы, чтобы выпадающий список не был go таким быстрым, но плавным?

Заранее спасибо!

Answer 1

Вот пример возможного решения. Макет отличается, но вы поймете идею.

ОБНОВЛЕНИЕ: включено javascript для обработки клика

const sections = [...document.getElementsByTagName("section")];
sections.map((section) => {
  section.addEventListener("click", function() {
    const paragraph = this.querySelector("p");
    paragraph.style.maxHeight = "100px";
  })
})

section {
  display: inline-block;
}

section img,
section h3,
section h5 {
  display: inline;
}

section p {
  max-height: 0;
  overflow-y: scroll;
  transition: max-height 1s;
  width: 300px;
  /* for demo purpose */
}

section:hover p {
  /*max-height: 100px;  to force scrollbar */
}

<section>
  <img src="https://via.placeholder.com/40">
  <h3>Pelvi-périnéologie</h3>
  <h5>+</h5>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>