How to Write the Simplest Stepper Script

In this article, we’ll go over the development of a simple stepper script. A stepper is a script that switches between screens/slides by clicking next or previous buttons. The definition may not be ideal, but the example should clearly demonstrate what it is and how it's used.

Personally, I’ve used similar implementations in a few of my past projects. So I thought — why not build a proper boilerplate for future use and publish it here as a blog article?

Including the Libraries

We’ll need:

1. Bootstrap — to easily style buttons and fonts
2. Font Awesome — to use three icons (arrow back, up, and forward)
3. Animate.css — for simple animations (though you can use plain CSS if you prefer)
4. jQuery — yes, it's time to move away from it and catch events with pure JS, but for now, let’s stick with it 🙂

Here’s how it looks:

<link rel="stylesheet" href="../library/bootstrap-4/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../library/font-awesome/css/all.min.css">
<link rel="stylesheet" href="../library/animate.css/animate.min.css">
<script src="../library/jquery/dist/jquery.min.js"></script>

HTML Code for Steps

We’ll create four steps total. On the third step, you’ll have the option to jump back to the first.

<div class="stepper-list" data-stepper="some-name">
    <div class="stepper-one active animated" data-step="1">
        <div class="stepper__content">
            Step 1
        </div>
        <div class="stepper__nav">
            <button type="button" class="btn btn-success" data-to-step="2">Вперед <i class="fas fa-chevron-circle-right"></i></button>
        </div>
    </div>
    <div class="stepper-one animated" data-step="2">
        <div class="stepper__content">
            Step 2
        </div>
        <div class="stepper__nav">
            <button type="button" class="btn btn-success" data-to-step="1"><i class="fas fa-chevron-circle-left"></i> Назад</button>
            <button type="button" class="btn btn-success" data-to-step="3">Вперед <i class="fas fa-chevron-circle-right"></i></button>
        </div>
    </div>
    <div class="stepper-one animated" data-step="3">
        <div class="stepper__content">
            Step 3
        </div>
        <div class="stepper__nav">
            <button type="button" class="btn btn-success" data-to-step="2"><i class="fas fa-chevron-circle-left"></i> Назад</button>
            <button type="button" class="btn btn-success" data-to-step="1">К шагу 1 <i class="fas fa-chevron-circle-up"></i></button>
            <button type="button" class="btn btn-success" data-to-step="4">Вперед <i class="fas fa-chevron-circle-right"></i></button>
        </div>
    </div>
    <div class="stepper-one animated" data-step="4">
        <div class="stepper__content">
            Step 4
        </div>
        <div class="stepper__nav">
            <button type="button" class="btn btn-success" data-to-step="3"><i class="fas fa-chevron-circle-left"></i> Назад</button>
            <button type="button" class="btn btn-success" data-to-step="send">Отправить <i class="fas fa-envelope"></i></button>
        </div>
    </div>
</div>

Important things to note:

data-stepper="some-name" — this attribute is placed on the wrapper for all the steps. Its value (e.g. "some-name") is the identifier of the stepper. This allows you to have multiple steppers on the same page.

The HTML code for a single step looks like this:

<div class="stepper-one animated" data-step="2">
    <div class="stepper__content">
        Step 2
    </div>
    <div class="stepper__nav">
        <button type="button" class="btn btn-success" data-to-step="1"><i class="fas fa-chevron-circle-left"></i> Назад</button>
        <button type="button" class="btn btn-success" data-to-step="3">Next <i class="fas fa-chevron-circle-right"></i></button>
    </div>
</div>

Where:
data-step="2" — defines the current step number
data-to-step="1" and data-to-step="3" — in the buttons, these indicate which step to navigate to. These values must match corresponding data-step values of other step blocks.

CSS Code for Steps

This part is simple and minimalistic — just a boilerplate:

.stepper-one:not(.active) {
    display: none;
}
.stepper__content {
    text-align: center;
    margin: 10px;
    padding: 50px 0;
    border: 1px dotted #47484B;
}
.stepper__nav {
    text-align: center;
}
.stepper__nav button {
    text-transform: uppercase;
}

The most important part:

.stepper-one:not(.active) {
    display: none;
}

Here, we hide all steps that do not have the active class. This ensures only one step is visible at a time.

JavaScript Code for the Stepper

As with the tabs example in the previous article, we’ll wrap the code in a function to allow multiple steppers on the same page:

jQuery(document).ready(function()
{
    function stepper(id)
    {
        var $Stepper = jQuery('[data-stepper="' + id + '"]');

		if($Stepper.length)
		{
			$Stepper.find('[data-to-step]').click(function(e){
	            e.preventDefault();

	            var step = jQuery(this).data('to-step');
	            
	            if(step == 'send')
	            {
	                alert('There may be AJAX sending data to the server here...');
	            }
	            else
	            {
					if($Stepper.find('.stepper-one').hasClass('bounceInRight') == false)
					{
						$Stepper.find('.stepper-one').addClass('bounceInRight');
					}
	                $Stepper.find('.stepper-one').removeClass('active');
	                $Stepper.find('[data-step="' + step + '"]').addClass('active');   
	            }
	        });
		}
    }
    
    stepper('some-name');
});

The stepper(...) function takes a single argument — the stepper's name. It searches the DOM for the matching component and uses jQuery to handle steps and events.

More details:

$Stepper = jQuery('[data-stepper="' + id + '"]');

Looks for the stepper on the page.

if($Stepper.length) {...}

If found, we proceed to attach click handlers.

var step = jQuery(this).data('to-step');

The step variable stores the step number or identifier.

if(step == 'send')
{
    alert('There may be AJAX sending data to the server here...');
}

In this case, we simulate sending data via AJAX. You could replace this with real form submission, saving to a database, sending via CURL API, etc.

Otherwise, we switch steps:

if($Stepper.find('.stepper-one').hasClass('bounceInRight') == false)
{
	$Stepper.find('.stepper-one').addClass('bounceInRight');
}
$Stepper.find('.stepper-one').removeClass('active');
$Stepper.find('[data-step="' + step + '"]').addClass('active');

This conditional is used to avoid re-adding the animation class if the user moves back and then forward again.

$Stepper.find('.stepper-one').removeClass('active');

Removes the active class from all step blocks, effectively hiding them (as defined in the CSS above).

$Stepper.find('[data-step="' + step + '"]').addClass('active');

Adds the active class to the selected step block, making it visible.

You can see the result of this stepper in action here.