Twitter Bootstrap collapse opened for smartphones

Question

I have such code snippet:

 <div class="alert alert-info">Today's news
        <div class="pull-right"><a class="btn btn-small" data-toggle="collapse" data-target="#newsDiv"><i class="icon-chevron-down"></i></a></div>
    </div>
    <div id="newsDiv" class="collapse in">
        Today something happened<br>
        Also yesterday happened<br>
        Maybe tomorrow<br>
    </div>

jsFiddle: http://jsfiddle.net/gfUXW/

I want this behaviour: When user visits with phone (width 480 px and below) collapse will be closed, when user visits with a bigger device collapse will be opened autmatically.

To make it responsive I need to do by CSS rules. But I couldn't figure how can I join responsive classes of bootstrap like "visible-phone" and "collapse in" class.

I think that you have to read the dedicated page in [BOOTSTRAP](http://twitter.github.io/bootstrap/components.html#navbar) — rpasianotto, Jul 12 '13 at 07:36
I have a navbar in top so I don't prefer two navbars. But also collapsible navbar dictates 979 px for switching. I must change less to switch for smartphones width. — trante, Jul 12 '13 at 14:33
Can I have some feedback on my answer? Is this question resolved? — Alexander Mistakidis, Jul 22 '13 at 20:45

score 0 · Answer 1 · answered Jul 12 '13 at 14:53

you need to add the responsive css file first then you can add the logic to the relevant media queries http://twitter.github.io/bootstrap/scaffolding.html#responsive

small example based on yours:

when you open following link with a device larger 480px, you will see everything
when you open with a device smaller 480px; you will see nothing (change browser size)

http://jsfiddle.net/iambnz/gfUXW/2/

@media (max-width:480px) { 
         .in{ display:none; }
         .alert-info{ display:none; }
         }

score 0 · Accepted Answer · edited May 23 '17 at 10:25

Since the collapse is a javascript plugin, I think the answer lies in using some javascript.

If you remove the in class, it will leave your collapse closed by default, which is useful to know. Then you can check this when the document is ready.

  if ($(window).width() > 480) {
    $(".collapse").collapse('show');   
  }

The methods are in the documentation: Bootstrap Collapse

See it in action by clicking run with different screen widths: http://jsfiddle.net/LaAWc/1/

If you want this checked constantly, you'll have to poll with a timer to keep checking. If that interests you, see How to detect in jquery if screen resolution changes?

I would prefer solving this without javascript, but it seems there is no other way.. — trante, Jul 23 '13 at 05:33

Twitter Bootstrap collapse opened for smartphones

2 Answers2