Question

This question is based on my previous question which I got a working answer to, but only for one slidetoggle element: link

I use the animate method to have the “hidden” elements loaded in the background. Otherwise I could just use slidetoggle, but this leads to a display:none which I don’t want.

So, here’s the function I got so far, but it only runs once for each h2.

HTML:

<h2>Show</h2>
    <div class="content">
        text text text
        <br />
        text text text
        <br />
        text text text
    </div>

<h2>Show</h2>
    <div class="content">
        text text text
        <br />
        text text text
        <br />
        text text text
    </div>

CSS:

.content {
  height: 0;
  overflow: hidden;
}

.heightAuto {
    height: auto;
}​

SCRIPT:

$(function(){  

    $("h2").toggle(function()

     {    
       var $content = $(this).next(".content");
       var contentHeight = $content.addClass('heightAuto').height();
       $content.removeClass('heightAuto');

       $content.removeClass('heightAuto').animate({ height: contentHeight}, 500);

     }, function() {

        $(this).next(".content").animate({ height: "0"}, 500);    

     });
});​

​Could it be a problem to get the height set to auto again? I just can’t find the trick.

Here’s also fiddle: jsfiddle

Answer 1

Add an extra wrapper which does not get resized:

<div class="content"><div class="inner">
    text text text
    <br />
    text text text
    <br />
    text text text
</div></div>

Then use this JS:

jQuery(function($) {  
    $('h2').toggle(function() {
        var $content = $(this).next('.content');
        $content.animate({ height: $content.find('> .inner').height() }, 500);
    }, function() {
        $(this).next('.content').animate({ height: 0 }, 500);       
    });
});

EDIT: If you don’t want to use an extra wrapper in your HTML, you can have the JS add a wrapper for you:

jQuery(function($) {  
    $('h2').toggle(function() {
        var $content = $(this).next('.outer');
        $content.animate({ height: $content.find('> .content').height() }, 500);
    }, function() {
        $(this).next('.outer').animate({ height: 0 }, 500);       
    }).next('.content').wrap('<div class="outer" style="height:0;overflow:hidden"></div>');
});​

If you use this approach, you should remove your CSS for the .content blocks. See updated fiddle: http://jsfiddle.net/QwmJP/21/