Cycling through elements periodically

March 25, 2022

I’ve found plenty of examples to show/hide divs with a timeout in JavaScript, but I can’t seem to solve my exact issue here.

I have six divs. I want to cycle through from 1 to 6 and then all over again, every 10 seconds. My current code is working as far as hiding the original div (always want div #one to show first on page load) after 10 seconds and showing the next one in sequence.

How can I cleanly cycle through these in order every 10 seconds?

$(document).ready( function () {
      startCycle();
    });

    function startCycle(){
        setTimeout(function(){
            document.getElementById('one').style.display = 'none';
            document.getElementById('two').style.display = 'block';
            document.getElementById('three').style.display = 'none';
            document.getElementById('four').style.display = 'none';
            document.getElementById('five').style.display = 'none';
            document.getElementById('six').style.display = 'none';
        }, 10000); // 10000ms = 10s
    }

    #one{
        display: block;
    }

    #two,
    #three,
    #four,
    #five,
    #six{
        display: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="one">Test One</div>
<div id="two">Test Two</div>
<div id="three">Test Three</div>
<div id="four">Test Four</div>
<div id="five">Test Five</div>
<div id="six">Test Six</div>

>Solution :

Maybe something like that ?

$(document).ready( function () {
      const eList = document.getElementsByClassName('hideMe');

      Object.keys(eList).forEach((elem, index) => {
        setTimeout(function(){
          toogle(eList[index])
        }, 10000 * index);
      });
   });

    function toogle(elem) {
      if (elem) elem.classList.toggle('hide')
    }

.hide {
        display: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<div id="one" class='hideMe hide'>Test One</div>
<div id="two" class='hideMe hide'>Test Two</div>
<div id="three" class='hideMe hide'>Test Three</div>
<div id="four" class='hideMe hide'>Test Four</div>
<div id="five" class='hideMe hide'>Test Five</div>
<div id="six" class='hideMe hide'>Test Six</div>