Question

jsFiddle here.

I’m toggling a div’s height using JQuery 1.5.2, and it mostly seems to work fine. However, the lower border line does not relocate when it grows, but it does relocate when it shrinks.

Same results for both Chrome and IE9 (I stopped trying other browsers after the first two, because they are my main targets, and are mostly compliant besides.) What gives?

What I’ve tried:

• hiding and re-drawing the border
• different (newer) versions of jQuery
• animate({height: x}, y) instead of css('height', x)

Answer 1

use this code,

$("#siteMapToggle").click(function() {
    var temp = $(this).attr("srcAlt");
    $(this).attr("srcAlt", $(this).attr("src"));
    $(this).attr("src", temp);

    if ($("#fullmenu .menu_tbl").is(':visible')) {
        $("#fullmenu").css('height', '100px');
        $("#fullmenu .menu_tbl").hide();
    }
    else {

        $("#fullmenu .menu_tbl").show();
        $("#fullmenu").css('height', '267px');
    }
});

http://jsfiddle.net/vtex4/4/