Hide and show span element by clicking div element?

Question

I try to show and hide the Details (span element with class Details_right or Details_left) of my Resume by clicking on the specific timeline div element with the class content, but it doesn't seem to work and I do not know what I am missing.

I expected it to add and remove the class hidden to the element but it doesn't

document.addEventListener("DOMContentLoaded", function() {
  const content = document.querySelectorAll(".content");
  const DisplayRight = document.querySelectorAll(".Display_right");
  content.addEventListener("click", function() {
    DisplayRight.removeClass("hidden");
  });
});

.Details_right {
  display: flex;
  position: absolute;
  z-index: 999;
  width: 90vw;
  margin-left: -190px;
  background-color: var(--accent1-color);
  border: solid var(--background-color2) 2px;
  border-radius: 1rem;
}

<div class="container right">
  <div class="content">
    <h2>2022</h2>
    <p>Title</p>
  </div>
  <span class="Details_right">
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes</span>
</div>

Answer 1

You should first add the .hidden class to CSS, then use the classList.toggle in JS. Also, as contents is a list, you should use forEach and then add the event listener to every element in that list.

Modify your code as follows:

document.addEventListener("DOMContentLoaded", function() {
  const contents = document.querySelectorAll(".content");

  contents.forEach(function(content) {
    content.addEventListener("click", function() {
      const DisplayRight = content.nextElementSibling;
      DisplayRight.classList.toggle("hidden");
    });
  });
});

.Details_right {
  display: flex;
  position: absolute;
  z-index: 999;
  width: 90vw;
  margin-left: -190px;
  background-color: var(--accent1-color);
  border: solid var(--background-color2) 2px;
  border-radius: 1rem;
}

.hidden {
    display: none;
}

<div class="container right">
  <div class="content">
    <h2>2022</h2>
    <p>Title</p>
  </div>
  <span class="Details_right">
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes</span>
</div>