Rachel S Rachel S - 5 months ago 9
jQuery Question

Bootstrap js screen size incongruence

I have a footer that shows up as a collapsed accordion on mobile, while on desktop the accordion shows as expanded with all list items. It works fine with the js I am using.

However, as I am expanding my viewport from mobile size to desktop size, the accordion will still stay collapsed. Conversely, when I make the screen smaller, the accordion shows expanded like it did on desktop.

I need the js to behave differently with screen size, as it's happening, dynamically, not just after I refresh. If I refresh, of course it looks fine.

Here is a bootply with my footer.

Answer

You can use this code to show panels on screens wider than 768px during resizing the browser (you can use else statement to hide them on smaller sizes).

$(window).resize(function () {
  if($(this).width() > 768) {
    $('.panel-collapse').collapse('show');
  } else {
    $('.panel-collapse').collapse('hide');
  }
});

$(window).trigger('resize');

BOOTPLY