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>