Accordions collapse by default in mobile and expanded by default in desktop Bootstrap 3 responsive

Question

I am creating few accordions using bootstrap 3. My requirement is all accordions should be expanded by default in 1024 resolution and above. on click it should hide

But in mobile devices it should be in collapse mode by default. on click it should expand

Here is my code:

<div class="panel-group" id="accordion">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 verticalBelowSpacing10px">
<!-- Asia Starts-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseSix">
Asia
</a>
</h4>

</div>
<div id="collapseSix" class="panel-collapse collapse in">
<!-- panel content starts-->
<div class="panel-body">
<!-- flags-->
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">China</a>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">India</a>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">Thailand</a>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">Singapore</a>
</div>
</div>
</div>
<!-- panel content ends-->
</div>
</div>
<!-- Asia ends-->
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 verticalBelowSpacing10px">
<!-- europe starts-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Europe
</a>
</h4>

</div>
<div id="collapseThree" class="panel-collapse collapse in">
<!-- panel content starts-->
<div class="panel-body">
<!-- flags-->
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">Germany</a>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">The Netherlands</a>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">Denmark</a>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">Italy</a>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">France</a>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">Belgium</a>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">Sweden</a>
</div>
</div>
</div>
<!-- panel content ends-->
</div>
</div>
<!-- europe ends-->
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 verticalBelowSpacing10px">
<!-- middle east north africa starts-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Middle East and North Africa
</a>
</h4>

</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<!-- flags-->
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">UAE</a>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">Israel</a>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">Saudi Arabia</a>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">Egypt</a>
</div>
</div>
</div>
<!-- flags-->
</div>
</div>
<!-- middle east north africa ends-->
</div>
</div>
<!-- 1st row ends-->
</div>

http://jsfiddle.net/monicaRegal/q5rLx1dn/1/embedded/result/

Thank you Monica Mandal

Answer 1

Try this:

$(document).ready(function(){
  var windowWidth = $(window).width();
  if(windowWidth <= 1024) //for iPad & smaller devices
     $('.panel-collapse').removeClass('in')
});

Answer 2

In your css:

@media (max-width: 768px) 
{
  .collapse.in {
        display: none;
    }
}