Как скрыть дополнительную кнопку фильтра на указанных c устройствах?

Question

Я пытаюсь построить фильтр. В устройствах lg я хочу использовать кнопку «больше фильтра» и скрыть hello world 3,4,5 внутри кнопки «больше фильтра». Принимая во внимание, что в устройствах md я не хочу больше кнопки фильтра и хочу загрузить весь контент.

Возможно ли это? Если так, может кто-нибудь помочь мне достичь этого?

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js""></script>


    <div class="row mb-3">
      <div class="col-12">
        <p>Hello world</p>
        <p>Hello world 1</p>
        <p>Hello world 2</p>
        <button id="more-filters" class="btn btn-primary btn-block" type="button" data-toggle="collapse" data-target="#moreFilters" aria-expanded="false" aria-controls="moreFilters">More filters</button>
        
    <div class="collapse" id="moreFilters">
      <p>Hello world 3</p>
      <p>Hello world 4</p>
      <p>Hello world 5</p>
    </div>
        
       </div>
    </div>

Answer 1

Приведенный ниже код скрывает кнопку на очень маленьких, маленьких и средних устройствах и показывает ее на больших и очень больших устройствах.

Вы должны использовать Javascript / Jquery, чтобы удалить класс «свернуть» "из элемента с id moreFilters на среднем устройстве и добавьте его на большое устройство.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js""></script>

<script>
$(window).on('resize', function() {
if($(window).height() > 992) {
    $('#moreFilters').addClass('collapse');
}else{
    $('#moreFilters').removeClass('collapse');
}
})
</script>

    <div class="row mb-3">
      <div class="col-12">
        <p>Hello world</p>
        <p>Hello world 1</p>
        <p>Hello world 2</p>
        <button id="more-filters" class="btn btn-primary btn-block d-none d-sm-none d-md-none d-lg-block d-xl-block" type="button" data-toggle="collapse" data-target="#moreFilters" aria-expanded="false" aria-controls="moreFilters">More filters</button>
        
    <div class="collapse" id="moreFilters">
      <p>Hello world 3</p>
      <p>Hello world 4</p>
      <p>Hello world 5</p>
    </div>
        
       </div>
    </div>