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 class="step-content" data-stepnum="1">
    <h2>Step content 2</h2>
  <div class="step-content" data-stepnum="2">
    <h2>Step content 3</h2>
  <div class="step-content" data-stepnum="3">
    <h2>Step content 4</h2>

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.
  display: none;
  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.


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 = $("").not(".done");
  let stepNumber = +$(latestActiveStep).data("stepnum");
  var stepContentClass = '.step-content';
  console.log("step", stepNumber);
  $(stepContentClass + '[data-stepnum= ' + stepNumber + ']').next().addClass('active');

function previous() {
  //console.log("Prev", Math.random());
  let latestDoneStep = $("").last();
  let stepNumber = +$(latestDoneStep).data("stepnum");
  var stepContentClass = '.step-content';
  console.log("step", stepNumber);
  $(stepContentClass + '[data-stepnum= ' + stepNumber + ']').addClass('active');


Check this JSFiddle for full code:

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top