Div Expansion and contraction on mouseover?

Question

I am making a drop down menu with jquery animate effect,

var mexpand = false;
function toggleMenu() {
    if (!mexpand) {
        $('jQuery selector').css({ "background": "url('Images/bnbgmenu.jpg') repeat-x top left" });
        $("#NavDiv").animate({ height: "200px" });
        mexpand = true;
    }
    else {
        $("#NavDiv").animate({ height: "35px" });
        $('jQuery selector').css({ "background": "url('Images/bnbguser.jpg') repeat-x top left" });
        mexpand = false;
    }
}

Kindly have a look on this jsfiddle

I want to hover on menu icon to expand and I want to contract when mouse leaves the drop down menu.

but I am facing problems with mouseover and mouseout which you can see in fiddle.

Thanks

Answer 1

Instead of calling the function, you can set functionality with jQuery. Give your icon image the class icon and then use following jQuery.

$( ".icon" )
    .mouseenter(function() {
        $("#NavDiv").animate({ height: "200px" });
    }
);
$("#NavDiv")  
    .mouseleave(function() {
        $(this).animate({ height: "35px" });
    }
);

See http://jsfiddle.net/hp4jh9f7/4/