toggle thru several elements with the same class

Question

Im trying to toggle thru several div elements with a certain class. All div's have the same class "step" and by clicking a button, the class "active" should be added on the first div, next click should remove the "active" class and put it on the next div and so on.

example html:

<button id="toggleNext">Next</button>
<div id="offer" class="step">
              <h2>Header -1</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
            </div>
          <div id="skills" class="step">
              <h2>Header -2</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
            </div>
  <div id="service" class="step">
              <h2>Header -3</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
            </div>

Minimal CSS, just to make our active class visible

.active {
   background: red;
}

im no Pro' yet, so please forgive my poor attempt, but i hope it shows what im trying to achive?

$("#toggleNext").on("click",function() { 

    if( $(".step").first().hasClass("active") ) {
            $(".step").first().removeClass("active").next().addClass("active");

    } else if( $(".step").not(".step:first").hasClass("active") ) {
            $(".step").prevAll().removeClass("active");

    } else {
            $(".step").first().addClass("active").nextAll().removeClass("active");
    }
})

thank you very much for any help!

Answer 1

You can create counter that will increment on click until it reaches same number as number of .step divs and then return to 0.

var i = 0;
$('#toggleNext').click(function() {
  $('.step').eq(i).addClass('active').siblings('.step').removeClass('active');
  (i < $('.step').length - 1) ? i++ : i = 0;
});

.active {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggleNext">Next</button>
<div id="offer" class="step">
  <h2>Header -1</h2>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div id="skills" class="step">
  <h2>Header -2</h2>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div id="service" class="step">
  <h2>Header -3</h2>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>