Menu
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>
219
After you've completed your design, navigate to widget settings > Additional Settings > enable Accordion On Small Screens. Then Select which device to apply accoirdion effect to from Apply Accrodion On option.
To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a . tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class . tab-content .
The data-toggle is an HTML-5 data attribute defined in Bootstrap. The advantage of using this is that, you can select a class or an id and hook up the element with a particular widget.
The . collapse class indicates a collapsible element (a <div> in our example); this is the content that will be shown or hidden with a click of a button. To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element.
In my case just copying tabs content into hidden accordion worked well.
Here is the source I extracted to small plugin - Bootstrap Tab Collapse
136
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
