jQuery click next button with time

by Adi Jaya

HTML

<nav id="nav-button">
    <button class="demo" data-selector="target-1">1</button>
    <button class="demo" data-selector="target-2">2</button>
    <button class="demo" data-selector="target-3">3</button>
    <button class="demo" data-selector="target-4">4</button>
    <button class="demo" data-selector="target-5">5</button>
</nav>
  
<div class="target" data-id="target-1"></div>
<div class="target" data-id="target-2"></div>
<div class="target" data-id="target-3"></div>
<div class="target" data-id="target-4"></div>
<div class="target" data-id="target-5"></div>

CSS

.demo {
  color: black;
}

.demo.active {
  color: white;
  background: blue;
}

.target {
  display: none;
  padding: 1em;
  border: 1px solid silver;
  margin: 1em 0;
}

.target.open {
  display: block;
}

/* demo */
.target::before {
    content: attr(data-id);
    display: block;
}

JavaScript

$(document).on("click", ".demo", function (e) {
    e.preventDefault();
    var selector = $(this).attr("data-selector");
    //before
    $(".target").removeClass("open");
    $(".demo").removeClass("active");
    //after
    $(".target[data-id='" + selector + "']").addClass("open");
    $(this).addClass("active");
    //more code
    //.....
});

function triggerClick() {
    var timer = 3000; // 3 second
    var nav = $("#nav-button");
    var buttonActive = nav.find(".demo.active").next(".demo");
    var length = buttonActive.length;
    console.log(length);
    if (length == 0) {
        buttonActive = nav.find(".demo").first();
    }
    buttonActive.trigger('click');
    setTimeout(triggerClick, timer);
}

//init triggerClick
triggerClick();