How to "cycle" through elements (show/hide) using JavaScript?

Question

I have a page that includes elements like these:

<div id="1" style="display: block;">
[...]
</div>
    
<div id="2" style="display: none;">
[...]
</div>
    
<div id="3" style="display: none;">
[...]
</div>
    
<button id="next" onclick="ScrollNext()">
    
<button id="previous" onclick="ScrollPrevious()">

When a user clicks "next", I want to determine which [div] is currently showing as "display: block;" modify that [div]'s style to "display: none;", and then modify the next sequential [div]'s style to "display: block;" (and of course I want to do the opposite when the user clicks the "previous" button)

I know how to write code for a button to toggle a single element this way, but how can I determine programmatically which element's style to modify?

What have you tried so far to make it work? If you attempt to solve it rather than asking for a ready-made solution and have a concrete problem, you'll probably learn more and get higher-quality answers. — fjc, Apr 05 '21 at 20:04
Take a look at [`document.querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll), then try to make your attempt, if you find a problem post another question or edit this one. — Gunther, Apr 05 '21 at 20:05
Skip the "style"-approach and work with "class" instead. Name one class "visible" the other "invisible" for example. And then just switch classes in order to show or hide a div. — , Apr 05 '21 at 20:06
@Jake Why not [edit your last post](https://stackoverflow.com/questions/66958395/is-there-a-javascript-library-that-allows-a-user-to-cycle-through-certain-elem) instead of reposting? — ggorlen, Apr 05 '21 at 20:08
@ggorlen - I made the mistake of assuming that doing so would be frowned upon. So the better practice is to make the question better fit SO's guidelines and then reopen it? — Jake, Apr 05 '21 at 20:15
Yep. The post closure banner says "You can edit the question so it can be answered with facts and citations." Then it'll enter the reopen queue. — ggorlen, Apr 05 '21 at 20:16
Does this answer your question? [Show/hide 'div' using JavaScript](https://stackoverflow.com/questions/21070101/show-hide-div-using-javascript) — Heretic Monkey, Apr 05 '21 at 20:33

score 1 · Accepted Answer · answered Apr 05 '21 at 20:18

I have an implementation using JavaScript as below. I have given distinct color to the div for the sake of observing the change. We basically make use of nextElementSibling and previousElementSibling properties of the Node to cycle forward and backward. Finding the current visible node is just a .find away.

const divs = [...document.querySelectorAll('.container')];

function getVisibleDiv() {
  const visibleDiv = divs.find(div => div.style.display === 'block');
  return visibleDiv;
}

function next() {
  const visibleDiv = getVisibleDiv();
  visibleDiv.style.display = 'none';
  if (visibleDiv.nextElementSibling?.className === 'container')
    visibleDiv.nextElementSibling.style.display = 'block';
  else {
    divs[0].style.display = 'block';
  }
}

function previous() {
  const visibleDiv = getVisibleDiv();
  visibleDiv.style.display = 'none';
  if (visibleDiv.previousElementSibling?.className === 'container')
    visibleDiv.previousElementSibling.style.display = 'block';
  else {
    divs[divs.length - 1].style.display = 'block';
  }
}

.container {
  width: 100px;
  height: 100px;
  background: green;
}

.container:nth-child(2) {
  background: orange;
}

.container:nth-child(3) {
  background: yellow;
}

<div id="1" class='container' style="display: block;">

</div>

<div id="2" class='container' style="display: none;">

</div>

<div id="3" class='container' style="display: none;">

</div>

<button id="next" onclick="next()">Next</button>

<button id="previous" onclick="previous()">Prev</button>

How to "cycle" through elements (show/hide) using JavaScript?

1 Answers1