There are several tabs (tabs) I try to make them all initially locked and go through them only with the "continue" "back" buttons, and when the transition goes forward, the previous tabs are assigned a class that shows that these tabs already filled. Please help to understand this difficult (for me) task.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery- validate/1.17.0/jquery.validate.min.js"></script> <div class="new_ico_tabs"> <ul class="new_ico_tabs_profile"> <li class="tab_new_ico_project_details"> <a href="#new_ico_project" class="ivory" data-toggle="tab">Project details</a> </li> <li class="tab_new_ico_stage"> <a href="#new_ico_stage" class="ivory" data-toggle="tab">Stage</a> </li> <li class="tab_new_ico_use"> <a href="#new_ico_use" class="ivory" data-toggle="tab">Use of funds</a> </li> </ul> <form id="new_ico_project_form"> <div id="new_ico_project" class="cart-item"> <input type="text" name="contact_name" class="required"> <div class="continue_btn right"> <button class="cart-next" type="button">CONTINUE > </button> </div> </div> <div id="new_ico_stage" class="cart-item"> <input type="text" name="contact_email" class="required"> <div class="back_btn left"> <button class="cart-back" type="button"> < BACK</button> </div> <div class="continue_btn"> <button class="cart-next" type="button">CONTINUE > </button> </div> </div> <div id="new_ico_use" class="cart-item"> <input type="text" name="stage" class="required"> <div class="back_btn"> <button class="cart-back" type="button"> < BACK</button> </div> <div class="continue_btn"> <button class="cart-next" type="button">CONTINUE > </button> </div> </div> </form> </div> $( function() { $( ".new_ico_tabs" ).tabs(); } ); $("#new_ico_project_form").validate({ rules: { contact_name: "required", contact_email: "required", stage: "required" }); $('ul.new_ico_tabs_profile li a[data-toggle="tab"]').on('show.bs.tab', function (e) { var $target = $(e.target); if ($target.parent().hasClass('disabled')) { return false; } }); $(".new_ico_tabs .cart-next").click(function (e) { var form = $(this).closest('.cart-item'); if ($('#new_ico_project_form').validate().form() === false) return false; var $active = $('ul.new_ico_tabs_profile li'); $active.addClass('check'); $active.next().removeClass('disabled'); nextTab($active); }); $(".new_ico_tabs .cart-back").click(function (e) { var $active = $('ul.new_ico_tabs_profile li'); prevTab($active); function nextTab(elem) { $(elem).next().find('a[data-toggle="tab"]').click(); } function prevTab(elem) { $(elem).prev().find('a[data-toggle="tab"]').click(); } 