CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Rachel S
Rachel S

Reputation: 3920

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.

Upvotes: 1

Views: 54

Answers (1)

max
max

Reputation: 8667

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');

$('.footer-panels [data-toggle=collapse]').click(function(e) {
  if($(window).width() > 768) {  
    e.preventDefault();
    e.stopPropagation();
  }    
});

Plus/minus buttons CSS:

.footer-panels [data-toggle=collapse] span:before {
  content: '\f068';
}
.footer-panels [data-toggle=collapse].collapsed span:before {
  content: '\f067';
}

BOOTPLY

Upvotes: 3

Related Questions