Tablets - remove the active class in portrait and put it back in landscape?

Question

JavaScript

Hello!

There is a block with filters. Implemented with toggle on bootstrap4. Toggle has a separate column for 1/3 of the screen. For PC, toggle always has the class active (expanded) by default, toggle-content - display:block

For tablets in portrait mode, the toogle column is stretched to the full width of the screen and with this construction I remove the active class and collapse toggle-content

if(window.width <= 992) {
     jQuery("div.toggle.active").removeClass("active");
     jQuery('div.toggle-content').css('display', 'none');
}

But if you rotate the tablet to landscape mode, in which the toggle column returns to its original size by 1/3 of the screen again, the active class for toggle and display: block for toggle-content are not returned.

Tell me how can these classes be returned when the tablet screen is rotated?

Answer 1

window.onresize = function( event ) {};

// или

window.addEventListener(`resize`, event => {
  // some code
}, false);

And accordingly you do a check and add the active class if the width is greater than 992

Answer 2

In the modern world, using resize for this is not good. In addition, you get a binding to magic numbers. What if the screen sizes are different?
If you need to accurately define portrait/landscape modes, then you should use media expressions.

const mql = window.matchMedia('(orientation: portrait)');

function handleOrientationChange(evt) {
  if (evt.matches) {
    // Портрет
    jQuery('div.toggle').removeClass('active');
  } else {
    // Альбом
    jQuery('div.toggle').addClass('active');
  }
}

mql.addListener(handleOrientationChange);

handleOrientationChange(mql);