How do I show one of the divs sequentially when the page is refreshed? for example, div 1 will appear when the page is opened, and when the page is refreshed, div 2 will change to 3 – 4 -5 on the next refresh, and when the queue is finished, it will return to the beginning.
example i’m working on :
<style>
.category {
display: none;
}
</style>
<div class="category">1</div>
<div class="category">2</div>
<div class="category">3</div>
<div class="category">4</div>
<div class="category">5</div>
<script>
$(document).ready(function () {
let divs = document.querySelectorAll(".category");
console.log(divs.length);
for (let index = 0; index < divs.length; index++) {
$(divs[index]).show()
}
});
</script>
but here it shows all when the page is loaded. How can I solve this?