title: Switch from tabs to collapse for responsive
body: <p>The goal is to switch from tabs to an accordion style collapse when the site is less than 676px wide. We are using Bootstrap.</p>
  
  <p>We'll hide ul.nav-tabs and a.accordtion-toggle respectively with css. The tabs work here, but the a.accordion-toggle aren't working. Any ideas?</p>
  
  <pre><code>&lt;ul class="nav nav-tabs" id="myTab" data-tabs="tabs"&gt;
    &lt;li class="active"&gt;&lt;a href="#panel1" data-toggle="tab"&gt;Panel 1&lt;/a&gt;&lt;/li&gt;    
    &lt;li class="active"&gt;&lt;a href="#panel2" data-toggle="tab"&gt;Panel 2&lt;/a&gt;&lt;/li&gt; 
  &lt;/ul&gt;
  
  &lt;a class="accordion-toggle" data-toggle="collapse" data-target="#panel&gt;Panel 1&lt;/a&gt;
    &lt;div class="tab-pane collapse" id="panel1"&gt;
   Panel 1 Content
    &lt;/div&gt;
  &lt;a class="accordion-toggle" data-toggle="collapse" data-target="#pane2&gt;Panel 2&lt;/a&gt;
    &lt;div class="tab-pane collapse" id="panel2"&gt;
   Panel 2 Content
    &lt;/div&gt;
  
  &lt;script&gt;
    jQuery(document).ready(function ($) {
      if (document.documentElement.clientWidth &lt;  767) {
          $('#myTab a').click(function (e) {
            e.preventDefault();
          }
  
          $(".collapse").collapse();
       }              
    });
  &lt;/script&gt;
  </code></pre>