AdminLTE box-collapse trigger/event listener

Question

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!

Answer 1

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]);
});