Свернуть DIV только на Mobile View - Bootstrap 3

У меня есть параметры поиска в боковой панели. Я хочу сделать функцию коллапса на этом DIV только на мобильном устройстве. Использование Bootstrap 3 - Последняя версия.

Вот HTML-разметка.

<div class="col-md-3 col-sm-4 SearchParameters">
            <h4 data-toggle="collapse" data-target="#search">Location</h4>
            <div class="col-md-12 sCheck no-gutter collapse" id="search">
                <h5>Lahore (254)</h5>
                <div class="col-md-12">
                    <form role="form">
                        <div class="checkbox checkbox-primary">
                            <input type="checkbox" id="ModelTown">
                            <label for="ModelTown">Model Town</label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input type="checkbox" id="DHA">
                            <label for="DHA">DHA</label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input type="checkbox" id="CG">
                            <label for="CG">Cavalry Ground</label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input type="checkbox" id="Gulberg">
                            <label for="Gulberg">Gulberg</label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input type="checkbox" id="Samnabad">
                            <label for="Samnabad">Samnabad</label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input type="checkbox" id="AIT">
                            <label for="AIT">Allama Iqbal Town</label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input type="checkbox" id="GardenTown">
                            <label for="GardenTown">Garden Town</label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input type="checkbox" id="Township">
                            <label for="Township">Township</label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input type="checkbox" id="FaisalTown">
                            <label for="FaisalTown">Faisal Town</label>
                        </div>
                        <a href="#">20 more locations</a>
                    </form>
                </div><!-- form-group -->
                <div class="clearfix"></div>
                <h5 class="second">Availability</h5>

                <div class="col-md-12 SelectDays">
                    <a href="#" class="Day">M</a>
                    <a href="#" class="Day">T</a>
                    <a href="#" class="Day active">W</a>
                    <a href="#" class="Day">Th</a>
                    <a href="#" class="Day">F</a>
                    <a href="#" class="Day">S</a>
                    <a href="#" class="Day">SU</a>
                </div><!-- SelectDays -->

                <div class="col-md-12 TimeSet">
                    <!-- timeFunction -->
                </div><!-- TimeSet -->

            </div><!-- col-md-12 -->
        </div><!-- SearchParameters -->

SearchParameters DIV Я использую, чтобы придать стилю код.

Примечание. Я хочу свернуть "SearchParameters" div только на мобильном устройстве и открыть его кнопкой. Там должно быть только 1 div. Я могу скрыть этот div и показать другой div, который виден на мобильных устройствах, но это не очень хороший подход. Я хочу свернуть этот div и показать его нажатием кнопки только на мобильных устройствах.

Ответ 1

Вы можете сделать это следующим образом:

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

Ответ 2

Так как класс "in" - это то, что определяет сбрасываемый элемент как открытый, его удаление на мобильных устройствах приводит к его сбрасыванию.

например.

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

Ответ 3

Почему бы не использовать window.matchMedia?

Для простоты я создал пример, основанный на Эндрю Динморе. Для проверки того, что-то видимо или нет, не требуется лишний пустой div.

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

наслаждайтесь!; -)