jQuery и. NET асинхронная мобильная проблема с bootstrap крахом

Question

Мы создаем инструмент фильтрации и у нас возникла проблема с мобильным телефоном. Когда вы выбираете опцию фильтра и прокручиваете вверх, фильтр сворачивается, а не остается открытым. Мы используем класс свертывания bootstrap. Я добавил jQuery, чтобы определить размер окна, чтобы я мог определить размер экрана и при необходимости повторно применить коллапс в классе. Это в том случае, если у пользователя есть устройство, такое как ipad, он загружает экран и затем поворачивается в увеличенное изображение. Мы хотим убедиться, что фильтр отображается на больших экранах, но скрыт на маленьких экранах при загрузке. Код ниже:

 jQuery(document).ready(function($) {
  var alterClass = function() {
    var ww = document.body.clientWidth;
    if (ww <= 1025) {
      $('.filter-sidebar-visible').addClass('collapse');
    } else if (ww >= 1026) {
      $('.filter-sidebar-visible').removeClass('collapse');
    };
  };
  $(window).resize(function(){
    alterClass();
  });
  //Fire it when the page first loads:
  alterClass();
 });

Страница фильтра программы: https://www.wilmu.edu/development/programs2020.aspx

При уменьшении экрана в браузере мы не можем повторить проблему. Вы можете повторить проблему только на реальном мобильном телефоне. Таким образом, использование инструмента проверки браузера не сработает, если вы попытаетесь посмотреть на него.

Я предполагаю, что это документ. Уже это вызывает проблему, но я не могу найти решение.