Module Animate - Hide & Show Divs

Module Animate - Hide & Show Divs

by Nirvanachain

HTML

<div class="container">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
</div>

CSS

.container div {
    display: none;
    border: 1px solid #000000;
    width: 100px;
    padding: 40px 0;
    text-align: center;
    margin: 0 auto;
}
/* Display the first div only **/
.container div:first-child {
    display: block;
}

JavaScript

var AnimateIt = (function (element) {
   
    function runIt () {
        this.container = element;
        console.log( this.container);
        this.box = this.container.querySelector('div');
        console.log(this.box);
        
        this.container.appendChild(this.box);
    };

    return setInterval( runIt, 1000 );
    
}( document.querySelector('.container') ) );