Animate dynamic div height?

For the menu page of a restaurant website I need an animate function that will adjust the height from a div (in animation) depending on the content (dynamic from database). I use the following function to switch between content:

 $(".menu").on("click", "a", function(e) {

and for the links

    <li><a href="modules/site/menu.php?category_id=1&amp;group_id=1">Soup</a></li>
    <li><a href="modules/site/menu.php?category_id=1&amp;group_id=2">Soup</a></li>

After some googling I found a few solutions but non of them is working. This is the last thing I tried:

[B]I changed:[/B]

[COLOR="#FF0000"]$(".kaart").load(this.href); [/COLOR]


[COLOR="#FF0000"]$(".kaart").load(this.href, function(res){
    function setContainerHeight() {
        newHeight = $('.content').height();
            height: newHeight
        }, 500  );

ut that isn’t doing the trick. I don’t get an error but div content won’t animate, it simply just snaps to the new size . How should I adjust the function so the animate function will work.?

Thank you in advance!

How about something like this.

<div class="wrap">
		<ul class="menu">
				<li><a href="content1.htm">Load content 1</a></li>
				<li><a href="content2.htm">Load content 2</a></li>
				<li><a href="content3.htm">Load content 3</a></li>
				<li><a href="content4.htm">Load content 4</a></li>
		<div class="content">
				<div class="inner"></div>

$(".menu").on("click", "a", function (e) {
    var $targetDiv = $('.content');
    var $targetDiv2 = $('.inner');
    $targetDiv.css('height', $targetDiv.height())
    $targetDiv2.load(this.href, function () {
        var newheight = $targetDiv2.height();
            height: newheight
        }, 500, "linear", function () {
                height: 'auto'

It could probably do with tidying up as its a little jumpy.:slight_smile:

Hi Paul. This is indeed where I’m after. Only the animation is not running not very smooth. I tried it with adjusting the ms but without the desired result as you can see here! What should I adjust to make the animation run more smooth


Remove the CSS animation form content and menubar as they are fighting with the js and then set .inner to be width:100% and float:left and see if that makes it smoother.

demo here.

(I added a fade to it also in the js.)

Hi Paul. That works like a charm :slight_smile: Thank you so much :tup: