Disable switch option in Bootstrap 3 collapse accordion at high resolutions

Question

Is it possible to disable the switching functionality in Bootstrap ballast mode only at high resolutions?

The goal is for the accordion to crash at low resolutions with the ability to switch states and expand to higher resolutions without the possibility of switching states. What would be the best way to use Bootstrap's built-in functionality to achieve this?

I made a demo version of Fiddle with what I have now. I am not good at 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'); } }); 

Answer 1

It is possible. You just have to stop the propagation of the click event:

 $('a[data-toggle="collapse"]').click(function(e){ if ($(window).width() >= 768) { e.stopPropagation(); } }); 

I updated your code on jsFiddle http://jsfiddle.net/1crojp98/2/

But this code will disable the ability to minimize and open panels (only for high resolutions, but in any case).

Answer 2

You can simply hide the link in high resolutions and instead show a bare title, for example. in the title bar:

 <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>