4

Bootstrap has handy events that get triggered when you use their .collapse classes properly. When using AdminLTE's collapsible boxes, I was hoping I could do something similar, so that I can deactivate rendering inside the box when it is fully collapsed, and reactivate rendering when it is fully open.

I tried using the events from here, such as shown.bs.collapse or hidden.bs.collapse, following their example:

$('#myCollapsible').on('hidden.bs.collapse', function () {
    // do something…
})

But after logging inside the event, it doesn't seem like AdminLTE's collapsible boxes trigger these events. I've searched to see if there are similar events for AdminLTE's collapsible box, but it doesn't seem to exist. I also looked if I could make a listener for when the collapsed-box class is added to the div in question, but that doesn't appear to be a feasible option, as solutions suggest firing the event yourself. Unfortunately, I'm not in control of when the class is added.

Does anyone have a solution to this? Thanks in advance!

Community
  • 1
  • 1
Rupayan Neogy
  • 73
  • 1
  • 10

4 Answers4

3

You can modify adminLTE's app.js file to achieve what you want. Just add a trigger after addClass and removeClass methods which are called after collapsing (slideUp) and expanding (slideDown) functions are completed, respectively.

box_content.slideUp(_this.animationSpeed, function () {
    box.addClass("collapsed-box");
    box.trigger('collapsed',[box, element]);
});

box_content.slideDown(_this.animationSpeed, function () {
    box.removeClass("collapsed-box");
    box.trigger('expanded',[box, element]);
});
akin.demirci
  • 106
  • 1
  • 8
  • Although I don't plan on implementing this now, this seems reasonable enough that I'll mark it as correct. Thanks for answering! – Rupayan Neogy Mar 08 '17 at 00:37
1

I had the same problem of yours.

I had tried like this:

$(seletor).on("remove", function (){ //code here })

But it doesn't work ether.

I solve my problem add a "click" event over the remove button:

$("#boxdiv button").on("click", function () {
   // Close event
})

This is executed before the box close.

Gustavo Marucci
  • 11
  • 1
  • By the way, you have asked about "colapse" event. You just use the same procedure. – Gustavo Marucci Oct 07 '16 at 02:51
  • I did end up implementing it in this format (a while ago), but thanks for this answer. Unfortunately, the original question was to see if I could do something *after* the box has fully collapsed, not as soon as someone clicks on the box (which is why the bootstrap event is so useful). I'll mark this with plus 1, but not as the answer in case someone comes around with a better solution. Thanks! – Rupayan Neogy Oct 08 '16 at 18:01
1

In my case, I don't want to edit app.js ('cause it is auto installed via bower), so here is an alternative :

$("#my-box-id [data-widget='collapse']").click(function() {
    var box = $(this).parents(".box").first();
    if (!box.hasClass("collapsed-box")) {
        console.log("collapsing #my-box-id ...");
    } else {
        console.log("expanding #my-box-id ...");
    }
});
4givN
  • 2,936
  • 2
  • 22
  • 51
0

In my case when using Admin-LTE 3.0 and want to use widget cards like Maximized and Minimized cards.

First

I modified the default structure of the Admin-LTE template:

 <div class="card card-success" id="card-slide">
        <div class="card-header">
            <h3 class="card-title">Bagian Sliders</h3>
            <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="maximize" onclick="card_collapse('#card-slide')" title="Click to expand"><i class="fas fa-expand"></i>
                </button>
            </div>
            <!-- /.card-tools -->
        </div>
        <!-- /.card-header -->
        <div class="card-body">
            <div class="card-on-minimized">
                Pengaturan slider yang ada pada bagian beranda halaman.
            </div>
            <div class="card-on-maximized d-none">
                Maximizable
            </div>
        </div>
        <!-- /.card-body -->
    </div>
    <!-- /.card -->

Second

I made the card_collapse() function to receive the trigger event:

function card_collapse(id) {
     if (!$(id).hasClass('maximized-card')) {
         $(id + ' .card-on-minimized').addClass('d-none');
         $(id + ' .card-on-maximized').removeClass('d-none');
     } else {
         $(id + ' .card-on-minimized').removeClass('d-none');
         $(id + ' .card-on-maximized').addClass('d-none');
     }
}

That it's!

Regards

Imam Ali Mustofa
  • 41
  • 10