jquery - Bootstrap Progress bar with custom validation -
i'm trying activate tabs of progress bar after slight validations. however, css % property of progress bar fails change. here javascript relevant code , working code on fiddle:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {      console.log("here");     //update progress     var step = $(e.target).data('step');     var percent = (parseint(step) / 4) * 100;      $('.progress-bar').css({width: percent + '%'});     $('.progress-bar').text(percent + '%');      //e.relatedtarget // previous tab  }) $('#page-wrapper').on('click', '#to-tab-2', function(e) {     e.preventdefault();          $('ul.nav-pills li a[data-step="2"]').attr({             "href": "#step2",             "data-toggle": "tab"         });         $('a[href="#step2"]').parent().removeclass('disabled')         $('a[href="#step2"]').click(); }); 
you mispelled tab in data-toggle="tabe". should work :
edit :
your selector tabs should $('.nav.nav-pills').on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {});. css working, click event isn't triggered because of change of data-toggle value. 
this way, work intended.