Collapse div based on screen size

Question

I'm just wondering how, based on the screen size, you could use the bootstraps of the accordion , so for example, you can say that I have a div, I want it to be displayed regularly at all, but when in mobile mode I want it to crash.

Any suggestions?

Answer 1

You can use the responsive utility classes in bootstrap to check this page for more details http://twitter.github.com/bootstrap/scaffolding.html#responsive

Sort of

<div class="visible-phone">accordion</div> <div class="visible-desktop">all data you want to display</div> 

Jsfiddle demo

Answer 2

Here is an example of using the proposed Shail approach, but without duplicating layouts. The alleged behavior is to have the element collapse at one of the Bootstrap 3 breakpoints ( screen-md ).

 @media (min-width: @screen-md) { #filters { display: block; } } <button type="button" data-toggle="collapse" data-target="#filters" class="visible-xs visible-sm collapsed">Filter</button> <div id="filters" class="collapse">...</div> 

The markup is such that #filters collapses, unless the css media request is applied and overrides the behavior of the collapse class.

The button for the #filters extension becomes visible only after the multimedia request is no longer applied.

Answer 3

UPDATE: before divs didn't close after another clicked how the accordion works. You must add a panel pane and a panel in HTML for it to work. HTML updated with CSS

A little late, but I hope this is what you were looking for. I tried to do the same, and this is the solution I came across. At first I tried to think about how navigation breaks down. I created a class called "div-collapse". Which acts like a crash navigation and makes the div closed and hidden depending on where you put it in css. (In this example, the div crashes on small devices)

CSS:

 #accordion .panel { border:none; -webkit-box-shadow:none; box-shadow:none; } .div-collapse { border-top: 0; -webkit-box-shadow: none; box-shadow: none; } .div-collapse { overflow-x: visible; -webkit-overflow-scrolling: touch; border-top: 1px solid transparent; -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); } /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { .div-collapse.collapse { display: block !important; height: auto !important; overflow: visible !important; } } 

HTML:

 <div class="container marketing"> <hr class="featurette-divider"> <h2>Heading for some content that you have</h2> <div class="row"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel"> <div class="col-md-12 visible-xs"> <p> <button data-parent="#accordion" class="btn btn-primary btn-lg btn-block" type="button" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1"> #1 Example One </button> </p> </div> <div id="collapse1" class="div-collapse collapse col-md-4"> <h3>Header 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dignissimos unde nemo sed necessitatibus vitae ipsum, maxime quaerat dolorum doloremque quibusdam vel mollitia inventore sequi, quam deleniti quidem sunt? Similique.</p> </div> </div> <div class="panel"> <div class="col-md-12 visible-xs"> <p> <button data-parent="#accordion" class="btn btn-primary btn-lg btn-block" type="button" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2"> #2 Example Two </button> </p> </div> <div id="collapse2" class="div-collapse collapse col-md-4"> <h3>Header 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dignissimos unde nemo sed necessitatibus vitae ipsum, maxime quaerat dolorum doloremque quibusdam vel mollitia inventore sequi, quam deleniti quidem sunt? Similique.</p> </div> </div> <div class="panel"> <div class="col-md-12 visible-xs"> <p> <button data-parent="#accordion" class="btn btn-primary btn-lg btn-block" type="button" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse3"> #3 Example Three! </button> </p> </div> <div id="collapse3" class="div-collapse collapse col-md-4"> <h3>Header 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dignissimos unde nemo sed necessitatibus vitae ipsum, maxime quaerat dolorum doloremque quibusdam vel mollitia inventore sequi, quam deleniti quidem sunt? Similique.</p> </div> </div> </div> </div> 

This will create three buttons for small devices and hide them until they are pressed. Once the screen becomes larger than small devices, the buttons will be hidden using boot classes. And then the divides will return to action, as usual. Thus, you do not need to create two different layouts and content for mobile and desktop computers.

JS Fiddle Demo: JS Fiddle Link

Answer 4

Bootstrap has built-in classes to help you with this. Try using .visible-phone , .visible-tablet etc. In your div.

Answer 5

Media queries are your friend.

In CSS add something similar (this is for iPhone 3-4 + retina):

 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (max-device-height: 480px) and (orientation:portrait) { /*your css here*/ } @media only screen and (max-device-width: 480px) and (min-device-width: 320px) and (max-device-height: 480px) and (orientation:landscape) { /*your css here*/ } 

Inside the query, you then added css to collapse the accordion.

Answer 6

Existing answers are a bit outdated. Instead of visible-[devicename] you can use a response class based on control points. So, let's say you want to have a box, #someid, shown completely on sm and above, and reset using the toggle button only in xs :

Bootstrap 3

Documents link :

• You hide things with hidden-* , where * is the breakpoint ( xs , sm , md , lg )
• You show things with visible-*-** , where * is the breakpoint, and ** is the CSS display value ( inline , block , inline-block ).
• You can set things that will collapse by default only at specific breakpoints using collapse-*

For instance:

 <button class="hidden visible-xs-block" data-toggle="collapse" data-target="#someid">Button label</button> <div id="someid" class="collapse-xs">Some content here</div> 

Bootstrap 4

Link to documents :

• hidden-*-up hides an element in * and higher, for example, hidden-md-up hides an element at md (middle desktop) and lg (large) control points.
• hidden-*-down the same for * , and less - hidden-md-down will hide from everything except the size of lg .
• There are no equivalents visible-* , you just do not hide them at these sizes.

For example (note V4 is still in alpha, and it looks like some changes are happening around the collapse, so this could change):

 <button class="hidden-xs-down" data-toggle="collapse" data-target="#someid">Button label</button> <div id="someid" class="hidden-sm-up">Some content here</div> 

The button is displayed only at size xs , the reset field by default remains hidden only at size xs .

Answer 7

I know that this was noted as already answered, but perhaps my answer will help someone in the future.

What I am doing in my scenario is to override the load with event.stopPropagation () on the desktop screens and make the removable frame multimedia queries visible.

Stupid example ( Jsfiddle example ):

Html:

 <div class="data-div" data-toggle="collapse" data-target="#collapseData"> <div class="row"> <div class="col-xs-12"> <b>Always visible data</b> </div> </div> <div class="row collapse" id="collapseData"> <div class="col-xs-12"> Mobile hidden data </div> </div> </div> 

CSS

 @media (min-width: 480px) { #collapseData { display: block; } } 

JavaScript:

 var MOBILE_WIDTH = 480; $( document ).ready(function() { if ($(window).width() >= MOBILE_WIDTH) { $('.data-div').click(function (event) { event.stopPropagation(); }); } })