Скрыть и показать текст с javascript

Question

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

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

function myFunction() {
  var x = document.getElementById("hide");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

#hide {
  display: none;
}

Answer 1

Вот так - выбор каждого h5

window.addEventListener("load", function() {
  [...document.querySelectorAll("h5")].forEach(function(h5) {
    h5.addEventListener("click", function(e) {
      let show = this.innerText === "+"
      this.previousElementSibling.classList.toggle("show", show);
      this.innerText = show ? "x" : "+";
    })
  })
})

.hide {
  display: none;
}

.show {
  display: block;
}

<section>
  <img src="img/trait8.svg" />
  <h3>Pelvi-p&eacute;rin&eacute;ologie</h3>
  <p class="hide">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis lacus orci, id imperdiet nulla ultrices consequat. Aliquam imperdiet rhoncus mattis. Nam maximus feugiat felis, tempus vulputate lectus. Interdum et malesuada fames ac ante ipsum
    primis in faucibus. Nulla congue urna in arcu varius bibendum. Donec nec velit a justo auctor tincidunt. Nulla posuere augue at ipsum suscipit imperdiet. Proin a accumsan urna. Morbi nunc orci, maximus in pharetra in, blandit sed sem. Fusce ullamcorper
    nulla nunc, a hendrerit enim imperdiet ac. Nam feugiat nunc ut purus blandit, ac condimentum ante sagittis.</p>
  <h5>+</h5>
</section>
<section>
  <img src="img/trait8.svg" />
  <h3>Pelvi-p&eacute;rin&eacute;ologie</h3>

  <p class="hide">Curabitur sed lectus sed ante dictum sollicitudin. Aliquam volutpat condimentum laoreet. Curabitur sit amet fringilla purus. Cras maximus, nisl eget placerat dignissim, mauris sem ultricies orci, vitae tristique justo purus quis urna. In consectetur
    justo purus, id aliquam lectus scelerisque ac. Mauris bibendum pulvinar arcu, eu imperdiet ipsum vestibulum ut. Aliquam turpis augue, lacinia ac consequat id, ullamcorper at magna. Ut nec urna scelerisque, facilisis velit nec, feugiat lectus.</p>
  <h5>+</h5>

</section>

Answer 2

Измените функцию на:

function myFunction(event) {
    var x = event.target.parentNode.getElementsByTagName("p")[0];
    if (x.style.display === "block") {
        event.srcElement.innerHTML = '+';
        x.style.display = "none";
    } else {
        event.srcElement.innerHTML = 'X';
        x.style.display = "block";
    }
}

Измените #hide на .hide:

.hide {
    display: none;
}

<p class="hide"></p>

И добавьте параметр события:

<h5 onclick="myFunction(event)">&plus;</h5>