Akordeony załamują się domyślnie w urządzeniach mobilnych i domyślnie są rozszerzane na pulpicie Bootstrap 3 responsive

Question

Tworzę kilka akordeonów za pomocą bootstrap 3. Moje wymagania to wszystkie akordeony powinny być domyślnie rozszerzone w rozdzielczości 1024 i wyższej. po kliknięciu powinno się ukryć

Jednak na urządzeniach mobilnych powinien być domyślnie w trybie zwinięcia. na kliknięcie powinno poszerzyć

Oto mój kod:

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

Dziękuję Monica Mandal

Answer 1

Spróbuj tego:

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

Answer 2

w twoich CSS:

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

Answer 3

odpowiedź Abdulla niemal pracował dla mnie, jednak musiałem użyć upadek() zamiast removeClass ('w')

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