step progress bar

Since you are using the data-stepnum attribute as a counter, you can use this to trigger different divs. Check this out:

1. Create content divs.

We create a content div for each tab, with the class `step-content` and the attribute `data-stepnum`. Make sure the value of the data-stepnum is the same as each tabs. This attribute is the part where we connect the tab with the content. Notice the `active` class add the first div, because the first content tab is active as well.
<div id="steps-content">
  <div class="step-content active" data-stepnum="0">
    <h2>Step content 1</h2>
  </div>
  <div class="step-content" data-stepnum="1">
    <h2>Step content 2</h2>
  </div>
  <div class="step-content" data-stepnum="2">
    <h2>Step content 3</h2>
  </div>
  <div class="step-content" data-stepnum="3">
    <h2>Step content 4</h2>
  </div>
</div>

2. Hide the content divs with css

Now we’re gonna hide the content divs by default with css. Only the active class should be visible.
.step-content{
  display: none;
}

.step-content.active{
  display: block;
}

3.Add the trigger with jQuery

You already got the `data-stepnum` value of the active class in a variable `stepNumber`, so we can use this to add the active class to the right content.

We’re gonna change the next() and previous() functions. First create a variable with the content classname, just to make it easier.

var stepContentClass = '.step-content';

Next, update the next() function. When the function runs, we want to hide all content so we have to remove all active classes.

$(stepContentClass).removeClass('active');

Now we want to show the right content. You already saved the active stepNumber, so we select the right content with this data-stepnum attribute.

$(stepContentClass + '[data-stepnum= ' + stepNumber + ']').next().addClass('active');

You can do the same with the previous() function.

Full functions:

function next() {
  //console.log("Next", Math.random());
  let latestActiveStep = $("div.step.active").not(".done");
  let stepNumber = +$(latestActiveStep).data("stepnum");
  var stepContentClass = '.step-content';
  console.log("step", stepNumber);
  $(latestActiveStep).addClass("done");
  $(latestActiveStep).find("i.icon-ok").toggle();
  $(latestActiveStep).find("i").not(".icon-ok").toggle();
  $(latestActiveStep).next().addClass("active");
  $(stepContentClass).removeClass('active');
  $(stepContentClass + '[data-stepnum= ' + stepNumber + ']').next().addClass('active');
}

function previous() {
  //console.log("Prev", Math.random());
  let latestDoneStep = $("div.step.active.done").last();
  let stepNumber = +$(latestDoneStep).data("stepnum");
  var stepContentClass = '.step-content';
  console.log("step", stepNumber);
  $(latestDoneStep).removeClass("done");
  $(latestDoneStep).next().removeClass("active");
  $(latestDoneStep).find("i.icon-ok").toggle();
  $(latestDoneStep).find("i").not(".icon-ok").toggle();
  $(stepContentClass).removeClass('active');
  $(stepContentClass + '[data-stepnum= ' + stepNumber + ']').addClass('active');
}

Result

Check this JSFiddle for full code: https://jsfiddle.net/0p9vekm7/

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top