Problem with "see more" (button)!

Question

I am with a small project that is to optimize the "see more" on a site or application and I came across a problem.

<div class="conteudo">
  <h2>
    <span>teste</span>
  </h2>
  <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit
. Donec tincidunt quis nibh eget feugiat. 
  </p>
  <hr />
</div>

<div class="conteudo">
  <h2>
    <span>teste2</span>
  </h2>
  <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit
. Donec tincidunt quis nibh eget feugiat. 
  </p>
  <hr />
</div>

<div class="conteudo">
  <h2>
    <span>teste3</span>
  </h2>
  <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit
. Donec tincidunt quis nibh eget feugiat. 
  </p>
  <hr />
</div>

The idea is that every time you click on what is written in "span", I can see the text and when you click on it again, I can hide the text.

Making a function for this is really easy actually, by changing the value of T, you can make the buttons work.

t = 0;
var span = document.querySelectorAll(".conteudo span")[t];

span1.addEventListener("click", function () {
  var cont = document.querySelectorAll(".conteudo p")[t];

  if (cont.classList.contains("mostrar")) {
    cont.classList.remove("mostrar");
  } else {
    cont1.classList.add("mostrar");
  }
});

With this, you solve the problem, however, from here it gets "complicated". To "solve" this problem, you would have to copy the code in JS several times and change the value of T. I was trying to do it in a way that I didn’t need to duplicate the code and change its value.

So I turn to you, fellow programmers to help me in this wonderful infernal endeavor.

I apologize in advance, I am beginner in programming and put on the forum for the first time.

Answer 1

One option would be to use the target click to identify the clicked element and then add/remove (using the classList.toggle) the class mostrar.

See the following example:

document.addEventListener('click', (e) => {
  if (e.target.tagName.toLowerCase() === 'h2' && e.target.parentNode.classList.contains('conteudo')) {
    e.target.nextElementSibling.classList.toggle('mostrar');
  }
});

p {
  display: none;
}

p.mostrar {
  display: block;
}

<div class="conteudo">
  <h2>Teste 1</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt quis nibh eget feugiat.
  </p>
</div>

<div class="conteudo">
  <h2>Teste 2</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt quis nibh eget feugiat.
  </p>
</div>

<div class="conteudo">
  <h2>Teste 3</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt quis nibh eget feugiat.
  </p>
</div>

Answer 2

var span = document.querySelectorAll(".conteudo");

I managed to solve the problem, I ended up having to use for each.

span.forEach((item) => {
  item.addEventListener("click", function () {
    const phr = this.querySelector("p");
    if (phr.classList.contains("mostrar")) {
      phr.classList.remove("mostrar");
    } else {
      phr.classList.add("mostrar");
    }
  });
});