CODEWITHSUNDEEP
twitter-bootstrapresponsive-designtwitter-bootstrap-3media-queries
JavaCake
JavaCake

Reputation: 4115

How to control collapse function on specific screen sizes

I am currently building a responsive website where i am using collapsable panels for the content. I am only looking to use the collapsable function for smartphones due to the massive amount of content.

So i have two scenarios:

  1. Tablets and smartphones with minimal screen space
  2. Desktop screens with enough screen space

Basically i want the collapse function to work only on scenario 1, where all panels are uncollapsed as default. In scenario 2 all panels should just be open and the collapse function should be disabled.

Since i am using Bootstrap collapse.js, is there a good way to handle this task?

enter image description here

Upvotes: 0

Views: 155

Answers (1)

jme11
jme11

Reputation: 17374

A media query can be used to prevent your panels from collapsing on larger viewports.

CSS:

@media (min-width: 992px) { /*or 1200px if you just want it to affect the lg devices*/
  .collapsing {
    height: auto !important;
  }
  .collapse {
    height: auto !important;
    display: block;
  }
}

As described in the doc here: http://getbootstrap.com/javascript/#collapse, the collapse plugin uses three classes to define the different states of the collapsed element: .collapse (display is set to none), .collapse.in (display is set to block) and .collapsing (when the element is transitioning). The media query above takes advantage of these and sets the collapse state to display block. However, you need to also override the inline height styles that are applied when the javascript is run, so using height: auto !important on both the collapse and collapsing state, causes the inline styles to be ignored in favor of the !important rule.

EDIT

See the comments below. If you find that the content doesn't display as expected, try adding visibility: visible; to the .collapse rule in the above media query.

Upvotes: 2

Related Questions