Switch from tabs to collapse for responsive

Question

The goal is to switch from tabs to an accordion style collapse when the site is less than 676px wide. We are using Bootstrap.

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?

<ul class="nav nav-tabs" id="myTab" data-tabs="tabs">
  <li class="active"><a href="#panel1" data-toggle="tab">Panel 1</a></li>    
  <li class="active"><a href="#panel2" data-toggle="tab">Panel 2</a></li> 
</ul>

<a class="accordion-toggle" data-toggle="collapse" data-target="#panel>Panel 1</a>
  <div class="tab-pane collapse" id="panel1">
 Panel 1 Content
  </div>
<a class="accordion-toggle" data-toggle="collapse" data-target="#pane2>Panel 2</a>
  <div class="tab-pane collapse" id="panel2">
 Panel 2 Content
  </div>

<script>
  jQuery(document).ready(function ($) {
    if (document.documentElement.clientWidth <  767) {
        $('#myTab a').click(function (e) {
          e.preventDefault();
        }

        $(".collapse").collapse();
     }              
  });
</script>

Answer 1

In my case just copying tabs content into hidden accordion worked well.

Here is the source I extracted to small plugin - Bootstrap Tab Collapse