Auto-close Bootstrap accordion panel when switch t

Question

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

          <div class="accordion" id="refine">
              <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search">
                  Title
                </a>
              </div>
              <div id="refine-search" class="accordion-body collapse in">
                <div class="accordion-inner">
                  Test text....
                </div>
              </div>
          </div>                    

The site is fully responsive. When switching to a mobile screen size [ @media (max-width: 979px) ] I want the accordion panel to close automatically, i.e. effectively I want the div refine-search line to change to "collapse out".

When in mobile mode, the accordion must still work, e.g. the user can click on the accordion heading and the panel will expand hence I do not want duplicate divs to turn the panel off using .hidden-desktop utility classes etc.

I've searched high and low for an answer - can anyone help?

Answer 1

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 2

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