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

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">China
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">India
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Thailand
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Singapore
</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">Germany
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">The Netherlands
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Denmark
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Italy
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">France
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Belgium
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Sweden
</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">UAE
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Israel
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Saudi Arabia
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Egypt
</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;
}
}

Answer 3

Abdulla's answer almost worked for me, however, I had to use collapse() instead of removeClass('in')
jQuery(document).ready(function(){
var windowWidth = jQuery(window).width();
if(windowWidth <= 1024) { //for iPad & smaller devices
jQuery('.panel-collapse').collapse()
}
});

Answer 4

Try This.
function adjustCollapseView(){
var desktopView = $(document).width();
if(desktopView >= "1024"){
$("#accordion a[data-toggle]").attr("data-toggle","");
$("#accordion .collapse").addClass("in").css("height","auto")
}else{
$("#accordion a[data-toggle]").attr("data-toggle","collapse");
$("#accordion .collapse").removeClass("in").css("height","0")
$("#accordion .collapse:first").addClass("in").css("height","auto")
}
}
$(function(){
adjustCollapseView();
$(window).on("resize", function(){
adjustCollapseView();
});
});