multi page form html javascript

Question

I want to create a multipage form where only my first page should not display the tab-pill and the remaining pages should have the tabs displaying but without the first page tab in it.

To navigate to the first page only the previous button from the second page should be used.

I am using material bootstrap wizard.

Codepen link

$('.wizard-card').bootstrapWizard({
...
// Class dn: display:none
onTabShow:
....
if($current == 1){
                console.log('first tab'); console.log(navigation.parent().addClass('dn'));
                console.log(tab);
            }else{
                navigation.parent().removeClass('dn')
            }
...
//This is the JS code i wrote to hide the navigation bar in the first page

Answer 1

Using some css , and the onInit, onNext, onPrevious you could reach your need :

First to avoid first tab click set pointer events to none as below :

.wizard-navigation ul li:first-child {
   pointer-events:none;
   visibility:hidden
}

Then you have to hide tabs on wizard initialization :

onInit : function(tab, navigation, index){
      $(".wizard-navigation").hide(); // hiding tab wizard
      //... rest of code 
},

then in onNext show navtabs :

Then you have to hide tabs on wizard initialization :

onNext : function(tab, navigation, index){
      $(".wizard-navigation").show(); // shiing tab wizard
      //... rest of code 
},

then in onPrevious check if index === 0 then hide it again

onPrevious : function(tab, navigation, index){
     if(index === 0) $(".wizard-navigation").hide(); // hiding tab wizard
      //... rest of code 
},

Here is a Pen