Wizzy 1.0.0

A simple and modern wizard plugin

View Demo

Get started

Copy the html template below and place your content inside step divs. Name your steps as you wish.

<div class="wz-wrapper wizzy">     <div class="wz-inner">         <div class="wz-header">             <nav>                 <a href="#">Step 1</a>                 <a href="#">Step 2</a>                 <a href="#">Step 3</a>             </nav>         </div>         <div class="wz-body">             <div class="wz-step">                 /* Step Content */             </div>             <div class="wz-step">                 /* Step Content */             </div>             <div class="wz-step">                 /* Step Content */             </div>         </div>         <div class="wz-navigator"></div>     </div> </div> 

Initialize the plugin using the following snippet.

$('.wizard').wizzy();