JavaScript Library For Simple Steps Structures – StepJs

Preview:

Description:

StepJs is a Javascript helper library to provide simple steps structures on your web page.

How to use it:

First, include the StepJs into your document.

<script async src="stepjs.min.js"></script>

StepJs has only one CSS requirement. Put this rules into your stylesheet.

.step-content > *  {
  display: none;
}

Next, set your anchors and steps structures markup. Be sure to match the data-steps anchors value to id of related step structure. Add active class to anchor of content that should be initial displayed. If you not set active content, the first will be displayed. The step structure indepent of HTML element so be free to choose. And also, id does not need to be sequential.

<!-- anchors -->
<a href="#step-1" data-steps="step-example">go to step 1</a>
<a href="#step-2" data-steps="step-example" class="active">go to step 2</a>
<a href="#step-3" data-steps="step-example">go to step 3</a>
<!-- step structure -->
<div id="step-example" class="step-content">
  <div id="step-1">
    <h1>Step 1</h1>
  </div>
  <div id="step-2">
    <h1>Step 2</h1>
  </div>
  <div id="step-3">
    <h1>Step 3</h1>
  </div>
</div>