slideToggle Callback Function

Question

// accordion
    $("#left-nav .block h2").click(function(){
      $(this).next("div").slideToggle("fast", function() {
        alert("hey");
        $("#left-nav, #content, #aside").equalHeight();
      })
      .siblings("div:visible").slideUp("fast");
      $(this).toggleClass("active");
      $(this).siblings("h2").removeClass("active");
    });
    $("#left-nav .block h3").toggle(function(){
     $(this).next("ul").slideToggle("fast");
     $(this).removeClass("active");
    }, function() {
     $(this).next("ul").slideToggle("fast");
     $(this).toggleClass("active");
     $(this).siblings("h3").removeClass("active");
    });

Alert works, but the columns are not resized. This is the equalHeight function:

jQuery.fn.equalHeight=function() {
var maxHeight=0;
this.each(function(){
 if (this.offsetHeight>maxHeight) {maxHeight=this.offsetHeight;}
});
this.each(function(){
 $(this).height(maxHeight + "px");
 if (this.offsetHeight>maxHeight) {
  $(this).height((maxHeight-(this.offsetHeight-maxHeight))+"px");
 }
});
};

BTW, can my accordion menu be rewritten better?

Many Thanks!

Answer 1

jQuery.fn.equalHeight=function() {
  var maxHeight=0;
  this.each(function(){
    if ($(this).height() > maxHeight) {
      maxHeight = $(this).height();
    }
  });
  return this.each(function() {
    $(this).height(maxHeight);
  });
};

NOTE: Make sure this is defined before you call it in your accordion code :).

If all else fails, try this plugin.