CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user1205371
user1205371

Reputation:

AdminLTE collapsed boxes by default

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.

Upvotes: 26

Views: 74696

Answers (15)

Thanhansoft
Thanhansoft

Reputation: 1

With Adminlte 3:

  1. Card Parent add ID: <div class="card card-default" id="a">
  2. Change <i class="fas fa-minus"></i> TO => <i class="fas fa-plus"></i>
  3. Add Display:none <div class="card-body" style="display:none">
  4. Add jquery $('#a').CardWidget('toggle');

Upvotes: 0

Alam
Alam

Reputation: 321

Add css classes into body tag in the index.html file:

sidebar-closed sidebar-collapse

<body class="hold-transition sidebar-mini sidebar-closed sidebar-collapse layout-fixed layout-navbar-fixed layout-footer-fixed">

Upvotes: 0

Unicorn Tears
Unicorn Tears

Reputation: 376

In Admin LTE 3 collapse by default by using the class collapsed-card on the main card.

Like this

<div class="col-md-3">
 <div class="card collapsed-card">
   <div class="card-header" >
     <h3 class="card-title">Expandable</h3>
     <div class="card-tools">
       <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i>
       </button>
     </div>
   </div>
   <div class="card-body" >
     The body of the card
   </div>
 </div>
</div>

You should change the icon to a fas fa-plus then the initial box starts with a plus

Upvotes: 10

Niklas Wulff
Niklas Wulff

Reputation: 3524

I added this to the boxWidget object:

setInitialCollapseStatus: function (container) {
        var _this = this;
        var collapsedBoxes = container.find('.box.collapsed-box .btn-box-tool > i');

        collapsedBoxes.each(function (index) {
            var box = $(this);
            //Convert minus into plus
            box
                .removeClass(_this.icons.collapse)
                .addClass(_this.icons.open);

        });

    }

and called it during initializiation: 

activate: function (_box) {
        var _this = this;
        if (!_box) {
            _box = document; // activate all boxes per default
        }
        //Listen for collapse event triggers
        $(_box).on('click', _this.selectors.collapse, function (e) {
            e.preventDefault();
            _this.collapse($(this));
        });

        //Listen for remove event triggers
        $(_box).on('click', _this.selectors.remove, function (e) {
            e.preventDefault();
            _this.remove($(this));
        });

        // Set initial collapseStatus
        _this.setInitialCollapseStatus($(_box));
    },

Upvotes: 0

Luciano Fernandes
Luciano Fernandes

Reputation: 1

This soluction worked for me:

I added "collapse-left" class for the menu and added the "strech" class for the main content.

I use the version 1 for the AdminLTE. It is divided in aside class="left-side" for the left menu and aside class="right-side" for the main content.

So, this is the final code:

<aside class="left-side collapse-left"> 
    <!-- put the left menu here --> 
</aside>
<aside class="right-side strech"> 
    <!-- put the main content here -->
</aside>

Upvotes: 0

Aamir Iqbal
Aamir Iqbal

Reputation: 1

<div class="box box-default collapsed-box">
  <div class="box-header with-border">
    <h3 class="box-title">Expandable</h3>
    <div class="box-tools pull-right">
      <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
    </div><!-- /.box-tools -->
  </div><!-- /.box-header -->
  <div class="box-body">
    The body of the box
  </div><!-- /.box-body -->
</div><!-- /.box -->

Upvotes: 0

Ola Ekelund
Ola Ekelund

Reputation: 111

An open box: <div class="box">

A collapsed box: <div class="box collapsed-box">

And then ofcourse change the icon on the button

Upvotes: 9

Maat
Maat

Reputation: 21

Simply add "collapsed-box" to the box and change this:

<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>

to 

<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>

This should work for me

Upvotes: 1

jtraslavi
jtraslavi

Reputation: 21

for one specify div

$(function() { $('your-button-id').click(); })

for all 

  $(function() { $("[data-widget='collapse']").click(); })

Upvotes: 1

brianlasta
brianlasta

Reputation: 314

For those who are using AdminLTE 2.1.1

just simply add sidebar-collapse class on the <BODY>


Before:

 <body class="skin-blue sidebar-mini">


After:

 <body class="skin-blue sidebar-mini sidebar-collapse">

Upvotes: 9

Robin Agrahari
Robin Agrahari

Reputation: 817

The correct tested Steps which worked for me are :

  1. Add explicit style "display:none" to box-body

  2. You are done :)

            <div class="box ">
                    <div class="box-header with-border bg-yellow">
                      <h3 class="box-title">Box Title Here</h3>
                      <div class="box-tools pull-right">
                        <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                        <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                      </div>
                    </div><!-- /.box-header -->
                    <div class="box-body" style="display: none;">
                      <div class="table-responsive">

                            <!--Your content here -->

                      </div><!-- /.table-responsive -->
                    </div><!-- /.box-body -->

        </div>

Upvotes: 0

user4036441
user4036441

Reputation: 551

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

Upvotes: 55

user2649102
user2649102

Reputation: 181

Here are the steps:

  1. Change the minus icon to plus .
  2. Add explicit style "display:none" to box-body
  3. Add the class "collapsed-box" to the box

Upvotes: 9

jaqb
jaqb

Reputation: 51

$("[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 (!$(this).children().hasClass("fa-plus")) {.
        $(this).children(".fa-minus").removeClass("fa-minus").addClass("fa-plus");
        bf.slideUp();
    } else {
        //Convert plus into minus
        $(this).children(".fa-plus").removeClass("fa-plus").addClass("fa-minus");
        bf.slideDown();
    }
});

and use in section div

Upvotes: 5

smistry
smistry

Reputation: 1126

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

Upvotes: 12

Related Questions