title: AdminLTE collapsed boxes by default
body: <p>AdminLTE is based on Bootstrap: <a href="https://github.com/almasaeed2010/AdminLTE" rel="noreferrer">https://github.com/almasaeed2010/AdminLTE</a></p>
  
  <p><strong>Live Preview:</strong> <a href="http://almsaeedstudio.com/preview/" rel="noreferrer">http://almsaeedstudio.com/preview/</a></p>
  
  <p>But I'm unsure as to how to make the collapsable boxes collapsed by default.</p>
  
  <p>I'm assuming since it is built on Bootstrap, this should be rather straightforward. I've tried fellow implementations such as setting the id to "collapsedOne" and attempting to treat the divs as accordions, but to no avail.</p>
  
  <p>On the AdminLTE/app.js ~line 45 there is code that implements slide up/slide down to collapse boxes. Ideally, what we'd want is to have the boxes be in the "slide up" state by default with the class "collapsed-box" so that when the icon is clicked, it executes "slide down".</p>
  
  <pre><code>/*     
   * Add collapse and remove events to boxes
   */
  $("[data-widget='collapse']").click(function() {
      //Find the box parent        
      var box = $(this).parents(".box").first();
      //Find the body and the footer
      var bf = box.find(".box-body, .box-footer");
      if (!box.hasClass("collapsed-box")) {
          box.addClass("collapsed-box");
          bf.slideUp();
      } else {
          box.removeClass("collapsed-box");
          bf.slideDown();
      }
  });
  </code></pre>
  
  <p>Any suggestions?</p>
  
  <p>Thanks in advance. </p>