Menu
Can the toggle functionality on Bootstrap collapse accordion be disabled only on larger resolutions?
The goal is to have the accordion collapsed on small resolutions with the option to toggle states, and expanded on large resolutions with no option to toggle states. What would be the best way to use Bootstrap built in functionality to achieve this?
I have made a Fiddle demo with what I have now. I'm not good with JS.
JSFiddle DEMO: http://jsfiddle.net/1crojp98/1/
HTML:
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-sm-6">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title text-center">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Panel 1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique laoreet dui, id porttitor ipsum convallis vel. Integer turpis nisl, rhoncus sed hendrerit sit amet, adipiscing nec eros. Suspendisse potenti. Nam quis risus libero. Vestibulum et diam nisl, eget feugiat leo.</p>
</div>
</div>
</div>
<div class="panel panel-default col-sm-6">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title text-center">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Panel 2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique laoreet dui, id porttitor ipsum convallis vel. Integer turpis nisl, rhoncus sed hendrerit sit amet, adipiscing nec eros. Suspendisse potenti. Nam quis risus libero. Vestibulum et diam nisl, eget feugiat leo.</p>
</div>
</div>
</div>
</div>
JavaScript:
$(document).ready(function(){
if ($(window).width() <= 768){
$('.panel-collapse').removeClass('in');
}
});
$(window).resize(function(){
if ($(window).width() >= 768){
$('.panel-collapse').addClass('in');
}
if ($(window).width() <= 768){
$('.panel-collapse').removeClass('in');
}
});
305
stopPropagation(); to prevent accordion from toggling when element in header is clicked.
To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element. Then add the data-target="#id" attribute to connect the button with the collapsible content (<div id="demo">).
Just add data-toggle="collapse" and a data-target to the element to automatically assign control of one or more collapsible elements. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element.
If you'd like it to default open, add the additional class show . To add accordion-like group management to a collapsible area, add the data attribute data-parent="#selector" . Refer to the demo to see this in action.
That's possible. You should just stop the click event's propagation:
$('a[data-toggle="collapse"]').click(function(e){
if ($(window).width() >= 768) {
e.stopPropagation();
}
});
I've updated your code on jsFiddle http://jsfiddle.net/1crojp98/2/
But this code will disable the possibility to both collapse and open panels (only for larger resolutions, but anyway).
108
You could just hide the link in the larger resolutions, and show a bare title instead, e.g. within the panel-heading:
<h4 class="panel-title text-center">
<a class="hidden-sm hidden-md hidden-lg" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Panel 1
</a>
<div class="hidden-xs">
Panel 1
</div>
</h4>
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
