title: Using button on collapsed Bootstrap navbar to toggle display of a specific div hidden with class="hidden-xs"
body: <p>I have a complex search form that I want to hide by default on mobile browsers, instead displaying an icon in the navbar that toggles its display.</p>
  
  <p>The div containing the search form is hidden by default on mobiles using <code>class="hidden-xs"</code></p>
  
  <p>What I wanted to do was have <code>$("#search").fadeToggle()</code> but this doesn't do the trick, in fact it doesn't appear to do anything.</p>
  
  <p>Instead I am partly there by using <code>$("#search").removeClass('hidden-xs')</code> but this obviously doesn't toggle, or give a fade effect. Am I missing something obvious? The search form is quite complex and I do not want it to be displayed in the navbar even on large screens.</p>
  
  <p>jsfiddle - <a href="http://jsfiddle.net/ZNUBx/1/" rel="nofollow">http://jsfiddle.net/ZNUBx/1/</a></p>