Collapse bootstrap скрывать на мобильных

Question

Сейчас блок всегда открыт. Задача - скрывать toggle-элемент на мобильных устройствах.


  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="true" aria-controls="collapseExample">
    Link with href
  </a>
<div class="collapse show" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

Вопрос - это можно решить, только js if ($(window).width() > 760), насильно коллапсируя элемент (или сажая в aria-expanded="false" и добавляя/удаляя класс show). Как это реализовать рационально (чтобы элемент сразу находился в нужном состоянии, а не сначала появлялся, а потом вдруг раскрывался/скрывался?)

Answer 1

Используйте медиа-запросы css

@media screen and (max-width: 760px) {
  #collapseExample {
    display: none;
  }
}

<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="true" aria-controls="collapseExample">
    Link with href
  </a>
<div class="collapse show" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

БЛОГ НА HUSL

Collapse bootstrap скрывать на мобильных

Ответы (1 шт):