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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="accordion" id="refine">
  <div class="hidden-phone hidden-xs">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search">
        <legend>
          <h2>Desktop: Refine your search</h2>
        </legend>
      </a>
    </div>
  </div>

  <div class="visible-phone visible-xs">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search">
        <legend>
          <h2>Mobile: Refine your search (press to reveal)</h2>
        </legend>
      </a>
    </div>
  </div>

  <div id="refine-search" class="accordion-body collapse in">
    <div class="accordion-inner">
      Test text....
    </div>
  </div>
</div>

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

Answer 2

So I eventually figured out how to do this, posting it in case it's of help to anyone.

Alter the HTML to:

<div class="accordion" id="refine">

    <div class="hidden-phone">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search">
                <legend>
                    <h2>Refine your search</h2></legend>
            </a>
        </div>
    </div>

    <div class="visible-phone">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search">
                <legend>
                    <h2>Refine your search (press to reveal)</h2></legend>
            </a>
        </div>
    </div>

    <div id="refine-search" class="accordion-body collapse in">

        <div class="accordion-inner">

            Test text....
        </div>

    </div>

</div>

And then use this JS in the file.

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

Answer 3

Bootstrap 4 accordion:

$(window).bind('resize load', function() {
    if ($(this).width() < 767) {
        $('.collapse').addClass('show');
    } else {
        $('.collapse').removeClass('show');
    }
});

Answer 4

For Bootstrap 3.x this worked great with no change to their example code:

$(window).bind('resize load', function() {
    if ($(this).width() < 767) {
        $('.collapse').removeClass('in');
        $('.collapse').addClass('out');
    } else {
        $('.collapse').removeClass('out');
        $('.collapse').addClass('in');
    }
});