title: Toggle "tabbable" - bootstrap
body: <p>I'm trying to achieve something that I'm relatively sure has been done several times before, however I can't seem to find any documetation on it.</p>
  
  <p>I'm using the responsive bootstrap for this, and the affected functionality revolves around the "tabbable" component. (see below)</p>
  
  <pre><code>&lt;div class="tabbable"&gt; &lt;!-- Only required for left/right tabs --&gt;
     &lt;ul class="nav nav-tabs"&gt;
        &lt;li class="active"&gt;&lt;a href="#tab1" data-toggle="tab"&gt;Section 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#tab2" data-toggle="tab"&gt;Section 2&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
  
     &lt;div class="tab-content"&gt;
        &lt;div class="tab-pane active" id="tab1"&gt;
           &lt;p&gt;I'm in Section 1.&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div class="tab-pane" id="tab2"&gt;
           &lt;p&gt;Howdy, I'm in Section 2.&lt;/p&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I am trying to achieve is a functionality that hides the content of the tab if it is already active. (in the example above, clicking the active <code>&lt; a &gt;</code> should remove the <code>"active"</code> class from both the button itself and the related div (<code>#tab1</code>) in a way that poses no threat for tabbable functionality)</p>
  
  <p>I would think that there is a very simple solution to this, being new to bootstrap however, I haven't been able to locate it yet and don't want to dig my own grave using some obsure javascript solution.</p>
  
  <p>Edit: After a comment I wanted to clarify my query even more. I want no tabs at all shown if i click on the button related to the div that is in in its active state, In other words, I want the click to work the same way .toggle works in jquery, like a flipswitch.</p>
  
  <p>Any ideas/input greatly appriciated!</p>