Auto-close Bootstrap accordion panel when switch to mobile screen size

Question

Using Bootstrap 2.3.2 I have an accordion with a single panel that is open when the page is loaded.

Answer 1

For anyone who comes across this thread: As of 2/17/17, when I came across this thread, both accordion panels were displayed on Desktop and Mobile. The classes "hidden-phone" and "visible-phone" were not showing/hiding depending on the viewport size. I added "hidden-xs" and "visible-xs" to the corresponding divs that wrap the accordion headings and I believe it is now functioning as it was intended to 3 years ago.

As rtpHarry explained, you do not need to add and remove the class "out", so I removed it. Other than that I did not make any additional edits.

$(window).bind('resize load', function() {
  if ($(this).width() <= 767) {
    $('#refine-search').removeClass('in');
  } else {
    $('#refine-search').addClass('in');
  }
});

  

    

      
        

          
Desktop: Refine your search
        
      
    
  

  

    

      
        

          
Mobile: Refine your search (press to reveal)
        
      
    
  

  

    

      Test text....
    
  

My example: http://www.bootply.com/ZAahtL5zGp