JavaScript Library For Simple Steps Structures – StepJs

Category: Javascript | August 12, 2015
Views Total:427 views
Official Page:Go to website
Last Update:August 12, 2015


JavaScript Library For Simple Steps Structures – StepJs


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 id="step-2">
    <h1>Step 2</h1>
  <div id="step-3">
    <h1>Step 3</h1>

You Might Be Interested In:

Leave a Reply