Solution 1 :

I would suggest you put those div elements in a container element, so you don’t actually need the id attributes anymore.

Then, as you use jQuery, use hide and show calls. You can use the remainder operator (%) to “cycle” an index variable.

For the sake of quickly checking this solution, I reduced the delay to half a second:

$(document).ready( function () {
    startCycle($("#container").children(), 0);

function startCycle($elems, i) {
    $elems.hide().eq(i % $elems.length).show();
    setTimeout(() => startCycle($elems, i + 1), 500); // 500ms = 0.5s
#container > div { display: none }
<script src=""></script>
<div id="container">
    <div>Test One</div>
    <div>Test Two</div>
    <div>Test Three</div>
    <div>Test Four</div>
    <div>Test Five</div>
    <div>Test Six</div>

Solution 2 :

Maybe something like that ?

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

      Object.keys(eList).forEach((elem, index) => {
        }, 10000 * index);

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

.hide {
        display: none;
<script src=""></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>

Problem :

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 () {

    function startCycle(){
            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
        display: block;

        display: none;
<script src=""></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>


Comment posted by tukars

if you use numbers in the id you can use a for loop instead of selecting them each time…. e.g .getElementById(`test-${i}`) and the id would be “test-1”, would certainly make things clearer. Also why are 2-5 not have any display set? are they display block or display none? I would use a while loop with an increment value and for each loop increment it by one and when it gets to the end reset to 0 or 1… or something along those lines…

Comment posted by isherwood

Sounds like you’re basically asking for a slideshow. Have you searched that topic? It’s well-trodden ground.

Comment posted by Geoff_S

@tukars that makes sense, thanks!

Comment posted by isherwood

Hint: don’t rely on IDs. Use index.

Comment posted by Geoff_S

@isherwood I didn’t think about it since there are no images but it totally makes sense that I should search that

Comment posted by Hadock

don’t know. ur solution is, by far, better