AdminLTE collapsed boxes by default

Question

AdminLTE is based on Bootstrap: https://github.com/almasaeed2010/AdminLTE

Live Preview: http://almsaeedstudio.com/preview/

But I'm unsure as to how to make the collapsable boxes collapsed by default.

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.

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".

/*     
 * 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();
    }
});

Any suggestions?

Thanks in advance.

Answer 1

When the page loads in its initial state, why not just add the collapsed-box class to box element?

The below will render in the collapsed state and function without modifying AdminLTE:

    <!-- Default box -->
    <div class="box box-solid collapsed-box">
        <div class="box-header">
            <h3 class="box-title">Default Solid Box</h3>
            <div class="box-tools pull-right">
                <button class="btn btn-default btn-sm" data-widget="collapse"><i class="fa fa-plus"></i></button>
                <button class="btn btn-default btn-sm" data-widget="remove"><i class="fa fa-times"></i></button>
            </div>
        </div>
        <div style="display: none;" class="box-body">
            Box class: <code>.box.box-solid</code>
            <p>bla bla</p>
        </div><!-- /.box-body -->
    </div><!-- /.box -->                       

Answer 2

$("[data-widget='collapse']").click() Add that to a JavaScript file that runs at the bottom