toggleClass только на уровне начальной загрузки 3

Question

Цели:

1. Скрыть раскрывающиеся списки на мобильном уровне.
2. Кнопка включения позволяет снова отображать раскрывающиеся списки только на мобильном уровне.

На моей странице результатов поиска есть список фильтров. 5 фильтров выставляются как часто используемые фильтры. Когда вы нажимаете «Показать больше фильтров», вы получаете полный список до 50 в зависимости от типа продукта. На мобильных устройствах (<768 пикселей) часто используемые фильтры занимают слишком много места, поэтому я стараюсь скрыть их с полным списком, пока не будет нажата кнопка «Показать больше фильтров». </p>

Вот текущий упрощенный код, который я пробовал для реализации этой кнопки обновления, но если у вас есть лучшее решение, у меня все в ушах:

$(window).load(function() {
  $('#filterOptions').on("click",function() {
    $('.search_facets_common').toggleClass('.mobile_facet_toggle');
  });
});

.mobile_facet_toggle { display: none; }

@media screen and (min-width: 768px) {
  . mobile_facet_toggle { display: block; }
}

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

<!-- this is for common filters -->
<div class="search-facets button-group col-xs-12 search_facets_common mobile_facet_toggle">
  <button type="button" class="btn btn-default search-facets dropdown-toggle col-xs-12">
    <span class="search-header float-left">frequently used filter</span>
  </button>
</div>

<div id="search_facets_body" class="hideSearchFacets">
  <!-- this is for all uncommon filters -->
  <div class="search-facets button-group col-xs-12">
    <button type="button" class="btn btn-default search-facets dropdown-toggle col-xs-12" >
      <span class="facet-header" >Complete filter list item</span>
    </button>
</div>
    
<div class="row search-facet-row">
  <div class="col-xs-12">
    <button id="filterOptions" class="btn btn-default btn-hubert-secondary">Show More Filters</button>
    <button id="clearFilters" class="btn btn-default">Clear Filters</button>
  </div>
</div>