jQuery slideDown animation jitter

Question

I notice when I change the padding settings on the content class (I think there is too much white space), it completely messes up the smooth dropdown. I'm not sure why this is the case, I can not see anything in the JavaScript.

Fiddle

HTML:

<div class="container">
    <div class="title"><h2><img src="http://i.imgur.com/XsDSYw6.png">TIME</h2></div>
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam turpis urna, tristique quis convallis nec, dapibus sed velit.</p></div>
<div class="title"><h2><img src="http://i.imgur.com/XsDSYw6.png">CREATIVITY</h2></div>
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam turpis urna, tristique quis convallis nec, dapibus sed velit.</p></div>
<div class="title"><h2><img src="http://i.imgur.com/XsDSYw6.png">BUDGET</h2></div>
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam turpis urna, tristique quis convallis nec, dapibus sed velit.</p></div>
</div>

CSS:

.title {
    padding-left:15px;
    height:17px;
    background: transparent url('http://www.elevate1.co.uk/dropdownwitharrows/images/arrow-toggle.png') 0px 5px  
        no-repeat;
    cursor:pointer;
    margin-bottom:10px;

}
.title img{
    width: 24px;
    margin-right: 5px;
    float: left;
}

.title span{
    font-size: 16px;
    line-height: 24px;
    float: left;
}
.on {
    background: transparent url('http://www.elevate1.co.uk/dropdownwitharrows/images/arrow-toggle.png') 0 -10px  no-repeat;
}
.content {
    display:none;
    padding: 10px;
    margin-bottom:10px;
}

JavaScript:

$(document).ready(function() {
    $('.title').click(function() {
        $('.title').removeClass('on');
        $('.content').slideUp('normal');
        if($(this).next().is(':hidden') == true) {
            $(this).addClass('on');
            $(this).next().slideDown('normal');
        } 
    });
});

Answer 1

What's happening is as the container's height is animated, the children of that container are being affected by margins, line-heights, etc, which are all dependent on the boundaries of the container. Add the following to fix:

.content {
    overflow: hidden;
}

Yeah, it's that simple :P

Here's your Fiddle updated.