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

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');
  }
});

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');
  }
});

• javascript
• twitter-bootstrap
• twitter-bootstrap-3
• accordion

• I have updated the fiddle with some content below the accordion and you can see the jump on large resolutions if you click the link, can it be avoided. jsfiddle.net/1crojp98/3 – imag Commented Jan 24, 2015 at 14:54

3 Answers 3

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

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>

Bootstrap 4

Just remove the data-parent="#accordion" from the collapsable body containers. it will not auto collapse when you open another section after this.