Multiple Wizards

I'm in Section 1.

Now I'm in Section 2.

3
4
5
6
7

I'm in Section 1.

Now I'm in Section 2.

3
4
5
6
7

I'm in Section 1.

Now I'm in Section 2.

3
4
5
6
7

I'm in Section 1.

Now I'm in Section 2.

3
4
5
6
7

HTML




JS


$(document).ready(function() {
    $('#rootwizard').bootstrapWizard({
        debug: false,
        onShow: function(tab, navigation, index) {
			console.log(this.id, 'onShow');
		},
        onNext: function(tab, navigation, index) {
			console.log(this.id, 'onNext');
		},
        onPrevious: function(tab, navigation, index) {
			console.log(this.id, 'onPrevious');
		},
        onLast: function(tab, navigation, index) {
			console.log(this.id, 'onLast');
		},
        onTabClick: function(tab, navigation, index) {
			console.log(this.id, 'onTabClick');
			alert('on tab click disabled');
		},
        onTabShow: function(tab, navigation, index) {
			console.log(this.id, 'onTabShow');
			var $total = navigation.find('li').length;
			var $current = index+1;
			var $percent = ($current/$total) * 100;
            $(this).find('.progress-bar').css({width:$percent+'%'});
		}
    });

	$('#tabs').bootstrapWizard({
        tabClass: 'nav nav-tabs',
        debug: false,
        onShow: function(tab, navigation, index) {
			console.log(this.id, 'onShow');
		},
        onNext: function(tab, navigation, index) {
			console.log(this.id, 'onNext');
		},
        onPrevious: function(tab, navigation, index) {
			console.log(this.id, 'onPrevious');
		},
        onLast: function(tab, navigation, index) {
			console.log(this.id, 'onLast');
		},
        onTabClick: function(tab, navigation, index) {
			console.log(this.id, 'onTabClick');
			alert('on tab click disabled');
		},
        onTabShow: function(tab, navigation, index) {
			console.log(this.id, 'onTabShow');
			var $total = navigation.find('li').length;
			var $current = index+1;
			var $percent = ($current/$total) * 100;
            $(this).find('.progress-bar').css({width:$percent+'%'});
		}
    });

	$('#tabsleft').bootstrapWizard({
        tabClass: 'nav nav-tabs justify-content-end',
        debug: false,
        onShow: function(tab, navigation, index) {
			console.log(this.id, 'onShow');
		},
        onNext: function(tab, navigation, index) {
			console.log(this.id, 'onNext');
		},
        onPrevious: function(tab, navigation, index) {
			console.log(this.id, 'onPrevious');
		},
        onLast: function(tab, navigation, index) {
			console.log(this.id, 'onLast');
		},
        onTabClick: function(tab, navigation, index) {
			console.log(this.id, 'onTabClick');

		},
        onTabShow: function(tab, navigation, index) {
			console.log(this.id, 'onTabShow');
			var $total = navigation.find('li').length;
			var $current = index+1;
			var $percent = ($current/$total) * 100;
            $(this).find('.progress-bar').css({width:$percent+'%'});
		}
    });

	$('#withfinish').bootstrapWizard({
        debug: false,
        onShow: function(tab, navigation, index) {
			console.log(this.id, 'onShow');
		},
        onNext: function(tab, navigation, index) {
			console.log(this.id, 'onNext');
		},
        onPrevious: function(tab, navigation, index) {
			console.log(this.id, 'onPrevious');
		},
        onLast: function(tab, navigation, index) {
			console.log(this.id, 'onLast');
		},
        onTabClick: function(tab, navigation, index) {
			console.log(this.id, 'onTabClick');
			alert('on tab click disabled');
			return false;
		},
        onTabShow: function(tab, navigation, index) {
			console.log(this.id, 'onTabShow');
			var $total = navigation.find('li').length;
			var $current = index+1;
			var $percent = ($current/$total) * 100;
            $(this).find('.progress-bar').css({width:$percent+'%'});
		},
        onFinish: function(tab, navigation, index) {
			console.log(this.id, 'onFinish');
            alert('Finished!, Starting over!');
            $(this).bootstrapWizard('first');
		}
    });
});