title: Bootstrap Tab close active on click
body: <p>I've got following code:</p>
  
  <pre><code>&lt;div id="action_wrap"&gt;
      &lt;div id="action_nav"&gt;
          &lt;div class="action" data-target="#content1" data-toggle="tab"&gt;First Block&lt;/div&gt;
          &lt;div class="action" data-target="#content2" data-toggle="tab"&gt;Second Block&lt;/div&gt;
          &lt;div class="action" data-target="#content3" data-toggle="tab"&gt;Third Block&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="action_items"&gt;
          &lt;div class="action_text collapse" id="content1"&gt;
              &lt;p&gt;Content 1&lt;/p&gt;
              &lt;span class="close"&gt;Close&lt;/span&gt;
              &lt;div class="clearfix"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="action_text collapse" id="content2"&gt;
              &lt;p&gt;Content 2&lt;/p&gt;
              &lt;span class="close"&gt;Close&lt;/span&gt;
              &lt;div class="clearfix"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="action_text collapse" id="content3"&gt;
              &lt;p&gt;Content 3&lt;/p&gt;
              &lt;span class="close"&gt;Close&lt;/span&gt;
              &lt;div class="clearfix"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and using <a href="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js" rel="nofollow">Twitter Boostrap's "Tab" script</a>, it works fine. I've added some really nasty looking script for close button and for nav button to get active class like so:</p>
  
  <pre><code>$(".action").click(function () {
      $(this).parent().children().removeClass("active");
      $(this).addClass("active");
      $(this).parent().addClass("active");
  });
  
  $(".close").click(function () {
      $(this).parent().parent().parent().children().removeClass("active");
      $(this).parent().parent().parent().children().children().removeClass("active");
  });
  </code></pre>
  
  <p>it's not much but meh, it's working.</p>
  
  <p>What i cannot do tho is make Bootstrap's Tab's closable by clicking active nav div. 
  Meaning if i click first .action div with data-target on #content1, .action_text#content1 will get .active class and so will the .action div i clicked on. And what i want is for .action.active data-target="#content1" on click removing .tab()'s class "active" and same for itself.</p>
  
  <p>I found in another thread that changing the code from Bootstrap's Tab script</p>
  
  <pre><code>$(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
      e.preventDefault()
      $(this).tab('show')
  })
  </code></pre>
  
  <p>but it seems everytime i edit it, it just breaks whole thing. I tried adding if statement like so</p>
  
  <pre><code>  $(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
        if ($(this).hasClass('active')) {
          $(this).tab().removeClass('active');
          $(this).removeClass('active');
        } else {
          e.preventDefault()
          $(this).tab('show')
        }
    })
  </code></pre>
  
  <p>But whole thing stopped working.</p>