<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <form id="popup> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="{{cancel}}"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="modal-title">{{user}}</h4> </div> <div class="modal-body"> <!-- <div class="alert alert-info"> {{user-clean-message}} </div>--> <div class="row form-group"> <div class="col-xs-12"> <ul class="nav nav-pills nav-justified thumbnail setup-panel"> <li class="active"> <a href="#step-1"> <h4 class="list-group-item-heading">Step 1</h4> <p class="list-group-item-text">Step description</p> </a> </li> <li class="disabled"> <a href="#step-2"> <h4 class="list-group-item-heading">Step 2</h4> <p class="list-group-item-text">Step description</p> </a> </li> <li class="disabled"> <a href="#step-3"> <h4 class="list-group-item-heading">Step 3</h4> <p class="list-group-item-text">Step description</p> </a> </li> </ul> </div> </div> <div class="form-horizontal"> <div class="row setup-content" id="step-1"> <div class="col-xs-12"> <div class="col-md-12 text-center"> <h1> STEP 1</h1> <div class="form-group required"> <label class="control-label col-sm-3" for="id">{{login}}</label> <div class="col-sm-8"> <input type="text" id="id" class="form-control" required maxlength="50" /> </div> </div> <div class="form-group required"> <label class="control-label col-sm-3" for="firstName">{{firstName}}</label> <div class="col-sm-8"> <input type="text" id="firstName" class="form-control" required maxlength="50" /> </div> </div> <div class="form-group required"> <label class="control-label col-sm-3" for="lastName">{{lastName}}</label> <div class="col-sm-8"> <input type="text" id="lastName" class="form-control" required maxlength="50" /> </div> </div> <div class="form-group required"> <label class="control-label col-sm-3" for="mail">{{mail}}</label> <div class="col-sm-8"> <input type="text" id="mail" class="form-control" required maxlength="50" /> </div> </div> <div class="form-group"> <label class="control-label col-sm-3" for="orgMail">{{orgMail}}</label> <div class="col-sm-8"> <input type="text" id="orgMail" class="form-control" placeholder="@gfi.fr" required maxlength="50" /> <span class="input-help"><i class="mode-edition fa fa-question-circle-o" data-container="#_ucDiv" data-toggle="tooltip" title="{{org-mail-help}}"></i></span> </div> </div> </div> </div> </div> <div class="row setup-content" id="step-2"> <div class="col-xs-12"> <div class="col-md-12"> <h1 class="text-center"> STEP 2</h1> <div class="form-group"> <label class="control-label col-sm-3" for="localId">{{localid}}</label> <div class="col-sm-8"> <input type="text" id="localId" class="form-control" maxlength="50" /> </div> </div> <div class="form-group"> <label class="control-label col-sm-3" for="department">{{department}}</label> <div class="col-sm-8"> <input type="text" id="department" class="form-control" maxlength="50" /> </div> </div> <div class="form-group required"> <label class="control-label col-sm-3" for="company">{{company}}</label> <div class="col-sm-8"> <input type="text" id="company" class="form-control" required maxlength="100" /> <span class="input-help"><i class="mode-edition fa fa-question-circle-o" data-container="#_ucDiv" data-toggle="tooltip" title="{{company-help}}"></i></span> </div> </div> <div class="form-group"> <label class="control-label col-sm-3" for="groups">{{groups}}</label> <div class="col-sm-8"> <input type="text" id="groups" class="form-control" /> <span class="input-help"><i class="mode-edition fa fa-question-circle-o" data-container="#_ucDiv" data-toggle="tooltip" title="{{group-help}}"></i></span> </div> </div> </div> </div> </div> <div class="row setup-content" id="step-3"> <div class="col-xs-12"> <div class="col-md-12"> <h1 class="text-center"> STEP 3</h1> </div> </div> </div> </div> </div> <div class="modal-footer"> <div class="checkbox pull-left"> <label for="create-another"> <input type="checkbox" id="create-another"> <span>{{create-another}}</span> </label> </div> <button id="activate-step-2" class="btn btn-primary btn-lg">Next</button> <input type="submit" class="btn btn-primary btn-raised" id="confirmCreate" value="{{save}}" data-loading-text="{{save}} ..." data-complete-text="{{save}}"> <button type="button" class="btn btn-link" data-dismiss="modal" aria-hidden="true"> {{cancel}} </button> </div> </div> </div> </form>

body{ margin-top:20px; }

$(document).ready(function() { var navListItems = $('ul.setup-panel li a'), allWells = $('.setup-content'); allWells.hide(); navListItems.click(function(e) { e.preventDefault(); var $target = $($(this).attr('href')), $item = $(this).closest('li'); if (!$item.hasClass('disabled')) { navListItems.closest('li').removeClass('active'); $item.addClass('active'); allWells.hide(); $target.show(); } }); $('ul.setup-panel li.active a').trigger('click'); // DEMO ONLY // $('#activate-step-2').on('click', function(e) { $('ul.setup-panel li:eq(1)').removeClass('disabled'); $('ul.setup-panel li a[href="#step-2"]').trigger('click'); $(this).remove(); }) });