Как удалять css класс для мобильной версии при помощи js?

Question

[Guser11]

Всем ДВС!
в bootstrap4 есть вот такой вот collapse блок:

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>

<div class="collapse" id="collapseExample">
    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>

Который прячет или отображает блок по клику. (удаляет-добавляет css класс show)
Нужен небольшой js скрипт который автоматически бы для мобильных версий удалял css класс "show" чтобы в моб версии блок автоматически изначально был скрыт а при нажатии открывался. Возможно ли такое?
совсем в js плох, подскажите пожалуйста! Заранее спс!

Answer 1

[Евгений]

на работоспособность не проверял, писал прямо тут

const desktopWidth = 992; // минимальный размер десктопной версии
window.addEventListener('resize', () => {
  if (window.innerWidth < desktopWidth) {
    const blocks = document.querySelectorAll('.collapse'); // находим все блоки с нужным классом. к классу collapse нужных блоков лучше все же добавить еще какой-то класс для того, чтобы идентифицировать именно эти блоки. и вписать новый класс сюда вместо .collapse; мало ли еще где-то будут использоваться блоки сворачивающиеся, где нужно будет их логику сохранить по дефолту.
    for (let i = 0; i < blocks.length; i++) {
      if (blocks[i].classList.contains('show')) { // проверяем, добавлен ли класс show на текущий момент
        blocks[i].classList.remove('show'); // удаляем show
      }
    }
  }
});