Collapse DIV only on Mobile View - Bootstrap 3

Question

I have a sidebar search parameters. I want to make collapse function on this DIV only on Mobile device. Using Bootstrap 3 - Latest version.

Here is the HTML Markup.<

Answer 1

You could do it this way:

<button class="visible-xs" data-toggle="collapse" data-target="#SearchParameters">Toggle it</button>

<div class="hidden-xs col-md-3 col-sm-4 SearchParameters" id="SearchParameters">
...

CSS:

#SearchParameters.in,
#SearchParameters.collapsing {
    display: block!important;
}

Answer 2

Why not using the window.matchMedia?

For simplicity I've created an example based on Andrew Dinmore. It doesn't need the extra empty div to check whether something is visible or not.

<button class="btn btn-default btn-block visible-xs hidden-sm hidden-md hidden-lg" data-toggle="collapse" data-target="#Foo">Toggle</button>

<div id="Foo" class="collapse in">
  <!-- fancy content here -->
</div>

<script type="text/javascript">
    $(document).ready(function () {
      if (matchMedia) {
        var mq = window.matchMedia("(max-width: 768px)");
        mq.addListener(WidthChange);
        WidthChange(mq);
      }

      function WidthChange(mq) {
        if (mq.matches) {
          $("#Foo").removeClass("in");
        }
      }
    });
  </script>

enjoy! ;-)

Answer 3

Since the "in" class is what defines the collapsible element as open, removing it on mobile causes it to start out collapsed.

E.g.

<button data-toggle="collapse" data-target="#collapsible">Show/Hide</button>
<div class="collapse in" id="collapsible">
    Content Here.
</div>
<div class="visible-xs" id="xs-check"></div>
<script>
if( $("#xs-check").is(":visible") )
    $("#collapsible").removeClass("in");
</script>

Answer 4

CSS-only method. Also works on Bootstrap 4.

@media (min-width: 768px) {
  .collapse.dont-collapse-sm {
    display: block;
    height: auto !important;
    visibility: visible;
  }
}

<div class="container">
  
  <button class="btn btn-primary hidden visible-xs" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Collapse Button
  </button>
  
  <div class="collapse dont-collapse-sm" id="collapseExample">
    <div class="well">
      Collapse Panel
    </div>
  </div>
</div>

source