JavaScript Library For Simple Steps Structures – StepJs

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

Preview:

JavaScript Library For Simple Steps Structures – StepJs

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>

You Might Be Interested In:


Leave a Reply