title: Bootstrap responsive tab - accordion, panel won't close when clicked
body: <p>I am using a jQuery plugin to make some bootstrap tabs responsive by converting the tabs to an accordion on sm &amp; xs resolutions. It is working fine, however it does not function like a normal bootstrap accordion - as I want to be able to close an accordion panel by clicking on the panel-title, however this does not work with this plugin. How can I make it to where the accordion panel will collapse if a user clicks on the panel-title of the active panel? I know in an actual bootstrap accordion, this would be accomplished by adding the data-toggle="collapse", but I am not very familiar with js, so I am unsure how to edit the plugin js to accomplish this. You can see a working jsfiddle example using the link below.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul class="nav nav-tabs responsive-tabs"&gt;
    &lt;li class="active"&gt;&lt;a href="#home1"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#profile1"&gt;Profile&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#Tab3"&gt;Tab3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="tab-content"&gt;
    &lt;div class="tab-pane active" id="home1"&gt;
      &lt;p&gt;1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="tab-pane" id="profile1"&gt;
      &lt;p&gt;2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="tab-pane" id="Tab3"&gt;
      &lt;p&gt;2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('.responsive-tabs').responsiveTabs({
    accordionOn: ['xs', 'sm'] // xs, sm, md, lg
  });
  </code></pre>
  
  <p>jsFiddle:
  <a href="http://jsfiddle.net/r40qvmww/16/" rel="nofollow noreferrer">http://jsfiddle.net/r40qvmww/16/</a></p>