Bootstrap Tabs - with Toggle Feature

by devangkantharia

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="tabbable">
   <ul class="nav nav-tabs">
      <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
      <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
      <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
   </ul>

   <div class="tab-content">
      <div class="tab-pane active" id="tab1">
         <p>I'm in Section 1.</p>
      </div>

      <div class="tab-pane" id="tab2">
         <p>Howdy, I'm in Section 2.</p>
      </div>
     
     <div class="tab-pane" id="tab3">
         <p>Howdy, I'm in Section 3.</p>
      </div>
   </div>
</div>

CSS

ul, menu, dir {
  display: block;
  list-style-type: disc;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 40px;
}

.bs-example-tabs .nav-tabs {
    margin-bottom: 15px;
}
.nav-tabs {
    border-bottom: 1px solid #ddd;
}
.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.nav-tabs>li {
    float: left;
    margin-bottom: -1px;
}
.nav>li {
    position: relative;
    display: block;
}
.nav-tabs>li>a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
}
.nav>li>a {
    position: relative;
    display: block;
    padding: 10px 15px;
}
a {
  color: #337ab7;
  text-decoration: none;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
  color: #555;
  cursor: default;
  background-color: #fff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
  color: #555;
  cursor: default;
  background-color: #fff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
}

JavaScript

$('[data-toggle=tab]').click(function(){
  if ($(this).parent().hasClass('active')){
	$($(this).attr("href")).toggleClass('active');
  }
})