HTML
<div id="rootwizard"> <ul> <li><a href="#tab1" data-toggle="tab">First</a></li> <li><a href="#tab2" data-toggle="tab">Second</a></li> <li><a href="#tab3" data-toggle="tab">Third</a></li> <li><a href="#tab4" data-toggle="tab">Forth</a></li> <li><a href="#tab5" data-toggle="tab">Fifth</a></li> <li><a href="#tab6" data-toggle="tab">Sixth</a></li> <li><a href="#tab7" data-toggle="tab">Seventh</a></li> </ul> <div class="tab-content"> <div class="tab-pane" id="tab1"> 1 </div> <div class="tab-pane" id="tab2"> 2 </div> <div class="tab-pane" id="tab3"> 3 </div> <div class="tab-pane" id="tab4"> 4 </div> <div class="tab-pane" id="tab5"> 5 </div> <div class="tab-pane" id="tab6"> 6 </div> <div class="tab-pane" id="tab7"> 7 </div> <ul class="pager wizard"> <li class="previous first" style="display:none;"><a href="#">First</a></li> <li class="previous"><a href="#">Previous</a></li> <li class="next last" style="display:none;"><a href="#">Last</a></li> <li class="next"><a href="#">Next</a></li> </ul> </div></div><div class="col-xs-12"> <input type='text' name='stepid' id='stepid' value='1' size='2' style='width:20px;' /> <input type='button' class='btn' id='disable-step' value='Disable' /> <input type='button' class='btn' id='enable-step' value='Enable' /> <input type='button' class='btn' id='show-step' value='Show' /> <input type='button' class='btn' id='hide-step' value='Hide' /> <input type='button' class='btn' id='remove-step' value='Remove' /></div>
JS
$(document).ready(function() { $('#rootwizard').bootstrapWizard({'tabClass': 'nav nav-pills'}); // Disable step $('#disable-step').on('click', function() { $('#rootwizard').bootstrapWizard('disable', $('#stepid').val()); }); // Enable step $('#enable-step').on('click', function() { $('#rootwizard').bootstrapWizard('enable', $('#stepid').val()); }); // Remove step $('#remove-step').on('click', function() { $('#rootwizard').bootstrapWizard('remove', $('#stepid').val(), true); }); // Show step $('#show-step').on('click', function() { $('#rootwizard').bootstrapWizard('display', $('#stepid').val()); }); // Hide step $('#hide-step').on('click', function() { $('#rootwizard').bootstrapWizard('hide', $('#stepid').val()); });});