<div id="example-basic">    <h3>Keyboard</h3>    <section>        <p>Try the keyboard navigation by clicking arrow left or right!</p>    </section>    <h3>Effects</h3>    <section>        <p>Wonderful transition effects.</p>    </section>    <h3>Pager</h3>    <section>        <p>The next and previous buttons help you to navigate through your content.</p>    </section></div><!-- ========== JS ========== --><script>    $(function($) {        $("#example-basic").steps({            headerTag: "h3",            bodyTag: "section",            transitionEffect: "slideLeft",            autoFocus: true        });    });</script>                                                    

<form id="example-form" action="#">    <div>        <h3>Account</h3>        <section>            <div class="row">                <div class="form-group col-md-6 col-md-offset-3">                    <label for="userName">User name <sup class="danger-color">*</sup></label>                    <input id="userName" name="userName" type="text" class="form-control required" placeholder="User name...">                </div>            </div>            <div class="row">                <div class="form-group col-md-6 col-md-offset-3">                    <label for="password">Password <sup class="danger-color">*</sup></label>                    <input id="password" name="password" type="password" class="form-control required" placeholder="Password...">                </div>            </div>        </section>        <h3>Profile</h3>        <section>            <div class="row">                <div class="form-group col-md-6 col-md-offset-3">                    <label for="name">First name <sup class="danger-color">*</sup></label>                    <input id="name" name="name" type="text" class="form-control required" placeholder="First name...">                </div>            </div>            <div class="row">                <div class="form-group col-md-6 col-md-offset-3">                    <label for="surname">Last name <sup class="danger-color">*</sup></label>                    <input id="surname" name="surname" type="text" class="form-control required" placeholder="Last name...">                </div>            </div>        </section>        <h3>Hints</h3>        <section>            <ul>                <li>Foo</li>                <li>Bar</li>                <li>Foobar</li>            </ul>        </section>        <h3>Finish</h3>        <section>            <input id="acceptTerms" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms">I agree with the Terms and Conditions.</label>        </section>    </div></form><!-- ========== JS ========== --><script>    $(function($) {        var form = $("#example-form");        form.validate({            errorPlacement: function errorPlacement(error, element) { element.before(error); },            rules: {                confirm: {                    equalTo: "#password"                }            }        });        form.children("div").steps({            headerTag: "h3",            bodyTag: "section",            transitionEffect: "slideLeft",            onStepChanging: function (event, currentIndex, newIndex)            {                form.validate().settings.ignore = ":disabled,:hidden";                return form.valid();            },            onFinishing: function (event, currentIndex)            {                form.validate().settings.ignore = ":disabled";                return form.valid();            },            onFinished: function (event, currentIndex)            {                alert("Submitted!");            }        });    });</script>                                                    

<form id="example-manipulation" action="#">    <div>        <h3>Account</h3>        <section>            <div class="row">                <div class="form-group col-md-6 col-md-offset-3">                    <label for="userName">User name <sup class="danger-color">*</sup></label>                    <input id="userName" name="userName" type="text" class="form-control required" placeholder="User name...">                </div>            </div>            <div class="row">                <div class="form-group col-md-6 col-md-offset-3">                    <label for="password">Password <sup class="danger-color">*</sup></label>                    <input id="password" name="password" type="password" class="form-control required" placeholder="Password...">                </div>            </div>        </section>        <h3>Profile</h3>        <section>            <div class="row">                <div class="form-group col-md-6 col-md-offset-3">                    <label for="name">First name <sup class="danger-color">*</sup></label>                    <input id="name" name="name" type="text" class="form-control required" placeholder="First name...">                </div>            </div>            <div class="row">                <div class="form-group col-md-6 col-md-offset-3">                    <label for="surname">Last name <sup class="danger-color">*</sup></label>                    <input id="surname" name="surname" type="text" class="form-control required" placeholder="Last name...">                </div>            </div>        </section>        <h3>Hints</h3>        <section>            <ul>                <li>Foo</li>                <li>Bar</li>                <li>Foobar</li>            </ul>        </section>        <h3>Finish</h3>        <section>            <input id="acceptTerms" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms">I agree with the Terms and Conditions.</label>        </section>    </div></form><!-- ========== JS ========== --><script>    $(function($) {        var form2 = $("#example-manipulation");        form2.children("div").steps({            headerTag: "h3",            bodyTag: "section",            transitionEffect: "fade",            enableAllSteps: true,            enablePagination: false,            onFinished: function (event, currentIndex)            {                alert("Submitted!");            }        });    });</script>                                                    

<div id="example-tabs">    <h3>Keyboard</h3>    <section>        <p>What is needed to transform it to a tabs component? Not much. Just override some properties and done.</p>        <pre class="prettyprint linenums">$("#wizard").steps({// Disables the finish button (required if pagination is enabled)enableFinishButton: false,// Disables the next and previous buttons (optional)enablePagination: false,// Enables all steps from the beginingenableAllSteps: true,// Removes the number from the titletitleTemplate: "#title#"});</pre>    </section>    <h3>Other demos</h3>    <section>        <p>Scroll down or up to see the other demos.</p>    </section>    <h3>Documentation</h3>    <section>        <p>For more information <a href="https://github.com/rstaib/jquery-steps/wiki">check out the documentation</a>!</p>    </section>    <h3>Purchase</h3>    <section>        <p>You can purchase 'Options - Admin Template' from Themeforest!</p>    </section></div><!-- ========== JS ========== --><script>    $(function($) {        $("#example-tabs").steps({            headerTag: "h3",            bodyTag: "section",            transitionEffect: "slideLeft",            enableFinishButton: false,            enablePagination: false,            enableAllSteps: true,            titleTemplate: "#title#",            cssClass: "tabcontrol"        });    });</script>                                                    

<div id="example-vertical">    <h3>Keyboard</h3>    <section>        <p>Try the keyboard navigation by clicking arrow left or right!</p>    </section>    <h3>Effects</h3>    <section>        <p>Wonderful transition effects.</p>    </section>    <h3>Pager</h3>    <section>        <p>The next and previous buttons help you to navigate through your content.</p>    </section></div><!-- ========== JS ========== --><script>    $(function($) {        $("#example-vertical").steps({            headerTag: "h3",            bodyTag: "section",            transitionEffect: "slideLeft",            stepsOrientation: "vertical"        });    });</script>