Search code examples
javascriptjqueryjquery-uitabsjquery-ui-tabs

Does Jquery UI tabs have an "after collapse" event?


What event can i use from jquery ui for identifying when a panel collapse has been completed(on the browser). I need to make some calculations on the basis of screen layout after the collapse. If i grab the select or the show even callbacks - i get the screen layout after the click but before the UI has been changed.

Anyone ?


Solution

  • You can be notified after animation completed using activate event as described in the jQuery UI doc.

    If the tabs are collapsing, ui.newTab and ui.newPanel will be empty jQuery objects.

    So you just have to check the length of ui.newTab and ui.newPanel to choose to do something or not.

    .tabs({
        collapsible: true,
        activate: function(event, ui) {
            if (ui.newTab.length == 0 && ui.newPanel.length == 0) {
                // do something
            }
        }
    });
    

    Here is the jsFiddle