Hidding/showing divs with JavaScript with timer

Issue

I am trying to make something similar to the header section of this site, and can't quite get it to work. I would like someone to help me with the following:

Here is my example code:

<div class="container">
    <div class="row" style="padding-top: 50px;">
        <div class="col-md-4">
            <div id="first" class="cube color1"></div>
            <div id="second" class="cube color3" style="display: none;"></div>
        </div>
        <div class="col-md-4">
            <div id="first" class="cube color2"></div>
            <div id="second" class="cube color1" style="display: none;"></div>
        </div>
        <div class="col-md-4">
            <div id="first" class="cube color3"></div>
            <div id="second" class="cube color2" style="display: none;"></div>
        </div>
    </div>
    <div class="row" style="padding-top: 50px;">
        <div class="col-md-4">
            <div id="first" class="cube color3"></div>
            <div id="second" class="cube color2" style="display: none;"></div>
        </div>
        <div class="col-md-4">
            <div id="first" class="cube color2"></div>
            <div id="second" class="cube color1" style="display: none;"></div>
        </div>
        <div class="col-md-4">
            <div id="first" class="cube color1"></div>
            <div id="second" class="cube color3" style="display: none;"></div>
        </div>
    </div>
</div>

The JavaScript:

<script>
    
    setInterval(hide, 2000);

    function switchDivs()
    {
        var first = document.getElementById("first");
        var second = document.getElementById("second");
    }

    function hide() {
        document.getElementById("first").style.display="none";
        document.getElementById("second").style.display="block";
    }

    function show() {
        document.getElementById("first").style.display="block";
        document.getElementById("second").style.display="none";
    }
</script>
    

Link to jsfiddle

I don't understand first why it doesn't change all the "first" divs into "second", it changes only the first div. Than the next question is how to make that action repeat over time, preferably more like random timer for each one of the 6 positions/boxes.

Shortly: I need divs with id="first" to be swapped with divs with id="second" , after like 5-10 seconds delay after loading the page. Then after the same delay, I need them to switch back to showing only divs with id="first" and so on... (something like setInterval function).

Solution

setInterval(function() { $(".color-blocks .col-md-4").each(function() { $(this).children().toggle(); }); }, 2000);

A simple line of code could be helpful, and in a simpler way.

Working fiddle : https://jsfiddle.net/65k788u6/3/

While you use ids, those should be unique, so instead use toggle() in order to make it look simpler.

Answered By - ameenulla0007