How to get the value of current tab in jquery step usign getCurrentIndex?

Question

I am trying to get the value of current tab using jquery, but I am stuck at very strange error.

console.log("Super Outside")
console.log($("#example-vertical").steps("getCurrentIndex"))
$("#example-vertical > div.actions.clearfix > ul > li:nth-child(2) > a").click( function() {
  console.log("Outside")
  console.log($("#example-vertical").steps("getCurrentIndex"))
 if ($("#example-vertical").steps("getCurrentIndex") == 3 ) {
    console.log("Inside")
}
})

According to the code I am trying to get the value of current Index and whenever it reaches the value of 3 I want to do display something by adding a css class.

My code above gives me back this result.

Super Outside
0
Outside
(index):1150 Uncaught TypeError: $(...).steps is not a function
    at HTMLAnchorElement.<anonymous> ((index):1150)
    at HTMLAnchorElement.dispatch (jquery-3.4.1.js:5237)
    at HTMLAnchorElement.elemData.handle (jquery-3.4.1.js:5044)

It has a value outside my selector but it doesn't have any value inside the selector.

How can I get the value inside my click event?

Answer 1

So the way I got this working was like this.

$("#example-vertical").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    stepsOrientation: "vertical",
    enableFinishButton: false,
    enableAllSteps: true,
    onStepChanged: function (event, currentIndex, priorIndex) {
      if(currentIndex == 3){
    submitButton = document.querySelector(".wpt-form-submit")
    submitButton.classList.add("mystyle");    
      }
   } 
});

You can't use this outside of the steps method. You can read more about what all you can do with Jquery Steps event by visiting this doc : https://github.com/rstaib/jquery-steps/wiki/Settings#events