I have 10 divs inside a container.

I want to show 1 div for 1 second the remove it and show notthing for 1 sec then show next div for 1 sec and so on.

Right now I started with all divs having a class of hide which is display:none in CSS.

And in JS this is what I have for the moment. everything works but the break at 1 sec before next div I dont know how to add:

function showOneAtTheTime() {  
    game5Intro.classList.add('hide')
    let letter = 0;
    myShapes(); // function which creating the 10 divs
    let timeInter = setInterval(function () {
        let alles = content.querySelectorAll("div")[letter]
        alles.classList.remove('hide');
        setTimeout(function () {
        alles.classList.add('hide');
    }, 1000)
    letter++;
    if (letter === 9) {
        clearInterval(timeInter);
        timeInter = null;
    }
   }, 1000);

}

}