从列表中一次显示一个元素/div

Question

I'm trying to make a single code hide all elements with the same class but show the one element by ID. The way it's implemented right now it just stacks the divs on top of each other. Anyway to show just one div at a time?

<script>
function CurtindoAlesadoDesktop() {
  var x = document.getElementById("curtindo-a-vida-alesado");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
</script>

Link in use: maninhoflix.com.br (desktop only)

Answer 1

Perhaps something like the following?

function showIdAndHideOthers(idToShow) {
  const elementsToHide = document.getElementsByClassName('class-to-hide');
  const elementToShow = document.getElementById(idToShow);
  for (const el of elementsToHide) {
    el.style.display = 'none';
  }
  elementToShow.style.display = 'block';
}

Alternatively, you could use two CSS classes, one which hides all elements by default, and another which shows the active element. Then, you can keep track of the most recently shown element and simply add/remove a class.

For example (CSS):

.thing {
  display: none;
}

.thing.selected {
  display: block;
}

JS:

let lastElement;
function showIdAndHideOthers(idToShow) {
  const elementToShow = document.getElementById(idToShow);
  if (lastElement != null) {
    lastElement.classList.remove('selected');
  }
  elementToShow.classList.add('selected');
  lastElement = elementToShow;
}

EDIT: Example for the second: https://codepen.io/minism/pen/GRgGdPg