twitter bootstrap collapse - visible only on desktop

Question

I am working on a project, and we are using twitter bootstrap. There is a sidebar that i have set up to have a collapse button that is hidden on desktop and visible on any other smaller resolution. I would like to set it so that the collapse is open in desktop and closed any other time. The code looks like this:

<p class="lead visible-desktop"><i class="icon-search"></i> Quick Search</p>
     <button type="button" class="btn hidden-desktop" data-toggle="collapse" data-target="#quicksearch"><i class="icon-search"></i> Quick Search</button>
     <div id="quicksearch" class="in">
          some content here...
     </div>

Can someone put me in the right direction?

You should look up css media queries. Here's an example that might help you start: http://stackoverflow.com/questions/11796297/div-show-hide-media-query — Joe_G, Jul 23 '13 at 17:53
This question is well documented not only in the Bootstrap docs but can easily be found with Google. The answer is also incorrect. — PW Kad, Jul 25 '13 at 01:53
It's well documented? Please provide links, code, or remove your vote. I spent the better part of two nights looking for a solution, before creating one on my own. It must not be that well documented. Yes the bootstrap docs provide documentation on how to set the collapse state to "in" or "out", but bootstrap does not provide an option for dynamically changing the in/out state depending on screen width at load or resizing without code duplication. This is precisely what i need to do, and this IS the correct solution. Clearly you did not interpret my question correctly. — TEN Design, Jul 25 '13 at 02:19
furthermore neither does $('#myCollapsible').collapse({ toggle: false }) or any variation of that. — TEN Design, Jul 25 '13 at 04:09

score 1 · Accepted Answer · answered Jul 25 '13 at 01:16

Just in case someone else looks for this, this is what i did....

jquery solution:

this code

<div id="quicksearch" class="in">
      some content here...
 </div>

is changed to so that the default display is with the div expanded

<div id="quicksearch">
      some content here...
 </div>

and this script is added so that when the window size is loaded or resized to below 765px (bootstraps phone width) the class "collapse out" is toggled which of course collapses the div

var toggleBlock = function() {
    var windowsize = $(window).width(),
        isDesktop = windowsize > 765;
    $("#quicksearch").toggleClass("collapse out", !isDesktop);
}

$(document).ready(toggleBlock);
$(window).on("resize.showContent", toggleBlock);
toggleBlock();

twitter bootstrap collapse - visible only on desktop

1 Answers1