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

  }

});