Documentation

This is may help you.

With easy structure and different options, You can show your forms like multi step

Html structure

<div class="tsf-wizard tsf-wizard-1">
        <div class="tsf-nav-step">
            <ul class="gsi-step-indicator triangle gsi-style-1  gsi-transition ">
                <li class="current" data-target="step-1">
                    <a href="#0">
                        <span class="number">1</span>
                        <span class="desc">
                            <label>Account setup</label>
                            <span>Account details</span>
                        </span>
                    </a>
                </li>
               <!-- ADD YOUR STEPS HERE -->
            </ul>
        </div>
        <!-- BEGIN STEP CONTAINER -->
        <div class="tsf-container">
            <form class="tsf-content">
               <!-- BEGIN STEP-->
                <div class="tsf-step step-1 active">
                    <fieldset>
                        <legend>Provide your account details</legend>
                        <div class="row">
                            <div class="tsf-step-content">
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="email">Email</label>
                                        <input type="email" class="form-control required" id="email" name="email" placeholder="Email">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </div>
              <!-- END STEP-->
            </form>
            <div class="tsf-controls ">
                <button type="button" data-type="prev" class="btn btn-left tsf-wizard-btn">
                    <i class="fa fa-chevron-left"></i> PREV
                </button>
                <button type="button" data-type="next" class="btn btn-right tsf-wizard-btn">
                    NEXT <i class="fa fa-chevron-right"></i>
                </button>
                <button type="submit" data-type="finish" class="btn btn-right tsf-wizard-btn">
                    FINISH
                </button>
            </div>
        </div>
    </div>
                
                

JavaScript


$('.your selector').tsfWizard({
        stepStyle: 'style1',
        stepEffect: 'basic',
        showStepNum: true,
        stepTransition: true,
        validation: false,
        navPosition: 'top',
        height: 'auto',
        showButtons: true,
        manySteps: false,
        prevBtn: '< class="fa fa-chevron-left"></>i> PREV',
        nextBtn: 'NEXT <i class="fa fa-chevron-right"></i>',
        finishBtn: 'FINISH',
        disableSteps: 'none',
        onNextClick: function (e) { },
        onPrevClick: function (e) { },
        onFinishClick: function (e) { }
});
                    
Option Description Values Default
stepStyle Show your multi step style style1
style2
style3
style4
style5
style5_circle
style6
style7_borderTop
style7_borderBottom
style7_borderLeft
style7_borderRight
style7_borderTop_circle
style7_borderBottom_circle
style7_borderLeft_circle
style7_borderRight_circle
style8
style8_circle
style9
style10
style11
style12
style1
stepEffect Show your data special animation effect's. basic - Basic
bounce - Bounce
slideRightLeft - Slide from right to left
slideLeftRight - Slide from left to right
flip - Flip
transformation - Transformation
slideDownUp - Slide from down to up
slideUpDown - Slide from up to down
basic
showStepNum Show or hide step numbers true | false true
stepTransition Change steps smoothly true | false true
validation Validate form or not.
Note : Validation and showButtons properties not be true same time.
true | false false
navPosition Multi step navigation position top | right | left | bottom 'top'
height Set any height (600px,400px etc) String 'auto'
showButtons Show or hide step controls true | false true
manySteps If you have many steps. Or your steps will be added dynamically you can use this option true | false true
prevBtn Previous button text String '<i class="fa fa-chevron-left"></i> PREV'
nextBtn Next button text String 'NEXT <i class="fa fa-chevron-right"></i>'
finishBtn Finish button text String 'FINISH'
disableSteps If you want disable steps, you can use this option all – disable all steps except current step
after_current – disable after steps except current step
before_current – disable before steps except current step
none – default value,enable all steps
'none'
onNextClick Function for any issue of your choice Name of function or anonymous function. First parameter is a element of clicked, second parameter is a number of actual step index, third parameter is jquery wrap for wizard, fourth parametr is validation value. function(e,from,to, validation){}
onPrevClick Function for any issue of your choice Name of function or anonymous function. First parameter is a element of clicked, second parameter is a number of actual step index, third parameter is jquery wrap for wizard. function (e,from,to) {}
onFinishClick Function for any issue of your choice Name of function or anonymous function. First parameter is a element of clicked, second parametr is validation value. function (e, validation) {}

API Methods

Name Description Return Example
goto() Go to specific index undefined
var _tsfWizard = $(".your selector").tsfWizard();
_tsfWizard.goto(index);
getCurrentIndex() Return a number of actual active step. number
_tsfWizard.getCurrentIndex();
setDisableSteps(value) Disable step in wizard undefined
_tsfWizard.setDisableSteps('all');
nextStep() Go to next step undefined
_tsfWizard.nextStep();
previousStep() Go to previous step undefined
_tsfWizard.previousStep();
validate() Validate current step undefined
_tsfWizard.validate();
nextButtonLabel() Set label for next button. undefined
_tsfWizard.nextButtonLabel('go next');
prevButtonLabel() Set label for previous button. undefined
_tsfWizard.nextButtonLabel('go back');
finishButtonLabel() Set label for finish button. undefined
_tsfWizard.nextButtonLabel('Finish');