Bootstrap Tab Pane Wizzard

by Faisal Pathan

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/css/ripples.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/css/bootstrap-material-design.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/js/ripples.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/js/material.js"></script>
<ol class="nav nav-tabs nav-wizzard">
  <li class="active"><a href="#Demographic" data-toggle="tab">Demographic</a></li>
  <li style="display:none;"><a href="#Marriage" data-toggle="tab">Marriage</a></li>
  <li><a href="#Income" data-toggle="tab">Income</a></li>
  <li><a href="#Health" data-toggle="tab">Health</a></li>
</ol>

<div id="myTabContent" class="tab-content">
  <div class="tab-pane panel panel-default fade active in" id="Demographic">

    <div class="col-xs-12">
      <div class="form-group label-static">
        <label class="col-md-2 control-label">Relationship Status</label>

        <div class="col-md-10">
          <div class="radio radio-primary">
            <label>
              <input type="radio" name="relationship" id="relationship_1" value="1" checked="">
              Single
            </label>
          </div>
          <div class="radio radio-primary">
            <label>
              <input type="radio" name="relationship" id="relationship_2" value="2">
              Married
            </label>
          </div>
        </div>
      </div>
    </div>
   ...

CSS

body {
  padding:15px;
  background: white;
}



.clear {
  clear: both
}

.nav-tabs.nav-wizzard {
    background: none;
    margin-left: -6px;
}
.nav.nav-wizzard > li {
    display: list-item;
}
.nav-tabs.nav-wizzard > li > a {
    margin-right: initial;
    line-height: initial;
    border: initial;
    border-radius: initial;
}
.nav.nav-wizzard > li > a {
    position: initial;
    display: initial;
    padding: initial;
}



.nav.nav-wizzard {
  list-style: decimal inside;
}
.nav-wizzard li a,
.nav-wizzard li a:hover,
.nav-wizzard li a:active{
  color:black !important;
}
.nav-wizzard li a,
.nav-wizzard li a:hover,
.nav-wizzard li a:active{
  text-decoration:none;
}
.nav-wizzard li {
    height: 50px;
    width: 100px;
    padding-left: 20px;
    background: #F5FBF1;
    position: relative;
    margin-left: 20px;
    line-height: 50px;
    font-family: sans-serif;
    font-size: 14px;
    float: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: content-box;
    cursor: pointer;
}
.nav-wizzard li:before, .nav-wizzard li:after {
    content: '';
    left: -15px;
    position: absolute;
    height: 23px;
    width: 132px;
    border-left: 2px solid black;
    border-right: 2px solid black;
}
.nav-wizzard li:before {
    border-top: 2px solid black;
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: skewX(30deg);
    -moz-transform: skewX(30deg);
    -ms-transform: skewX(30deg);
    transform: skewX(30deg);
    top: 0;
    box-shadow: inset 0 8px 0 8px #F5FBF1, inset -6px 8px 0 8px #F5FBF1;
    box-sizing: content-box;
}
.nav-wizzard li:after {
    border-bottom: 2px solid black;
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: skewX(-30deg);
    -moz-transform: skewX(-30deg);
    -ms-transform: skewX(-30deg);
   ...

JavaScript

$.material.init()

$("[name='relationship']").change(function() {
  if (!this.checked) return;
  var showMarriage = this.value == 2
  $(".nav [href='#Marriage']").parent('li').toggle(showMarriage);
})

$('.nav-tabs li').click(function(e) {
  // remove active class from others
  $(this).closest(".nav-tabs").find("li.active").removeClass("active");
  $(this).find("a").tab('show')
})