Weird IE8 problem when using .animate({'height':'toggle'})

Question

Check out http://wouter.howafarms.com/faq

The goal is to have answers be expanded on click.
As you'll see this works perfectly in all browsers except for ie8.

I've tried various animation effects .slideDown(), .toggle() to no avail. They always work in Firefox, Chrome and even IE7, but never in IE8. What in the heck might be causing it.

Here's the JavaScript:

$(document).ready(function() {
$("#faq-list li").addClass('inactive');
$("#faq-list li").first('.inactive').toggleClass('inactive');
$("#faq-list li h2").toggle(
    function(){
        $(this).parent().find('.answer').animate({'height': 'toggle'},{queue:true,duration:300})
        $(this).toggleClass('inactive')
    } ,
    function() {
        $(this).parent().find('.answer').animate({'height': 'toggle'},{queue:true,duration:300})
        $(this).toggleClass('inactive')
    })

})

Answer 1

Just tried... yeah it is a bit odd.. maybe IE8's having a stroke with its height calculation.

Maybe try slideDown/slideUp instead of .animate({'height': 'toggle'} in your toggle?

Also, you can write the first two lines:

$("#faq-list li").addClass('inactive');
$("#faq-list li").first('.inactive').toggleClass('inactive');

as

$("#faq-list li:not(:first)").addClass('inactive');

Answer 2

Im not sure why, but display:inline on your h2 element (the question) is why the collapse isn't working right in ie8. remove that and you are fine. just have to restyle the "q" so it lines up