views:

164

answers:

1

I am building a user interface. When a user clicks on a tab, a function is fired which checks for other open tabs (by searching for a class, "max"), minimizes that tab, then maximizes the clicked tab and applies the class, "max". I want to make it work in such a way that it will minimize the tab if I click elsewhere on the document. Any ideas?

    function resize_tab(t) {
        tab = $(t).parent()
        console.log(tab);
        var size = 0 - parseFloat($(".max").css("height")) + 30;
        function resize(what,size){
            $(what).animate({"marginTop" : size},500,function(){}).toggleClass("max")
            }
        if ($(tab).hasClass("max")){    //if what you clicked is maxed...
            resize(tab,size);           //minimize it
            }else{                      //Or else, minimize whatever is maxed...
                resize($(".max"),size); //minimize whatever is maxed
                resize(tab,-1);     //and maximize what you clicked.
        }
    }           

    $(".tab").click(function(){resize_tab(this)})
A: 

You could put a click event on the BODY tag, when somebody clicks on the body it will execute code:

$("body").click(function(){
  $(".tab").removeClass("max");
  //other resizing code as needed
})
JKirchartz