jQuery slideToggle: jumpy at the end

Question

Just wrote something up for a .slideToggle for a "Read more.../Read less...", the issue is that at the end of the slide, the animation "jumps", for a lack of a better description. Likewise when the slide is started again. Any suggestions?

I have it in jsFiddle

EDIT: I'm using Chrome

<div class="details">
<p>I am an excerpt.</p>
    <span class="show">Read More...</span>

        <div class="info">
        <p>the info to show in here......</p>
        </div>
        </div> <!-- details -->

<div class="details">
<p>I am an excerpt.</p>
    <span class="show">Read More...</span>

        <div class="info">
        <p>Some different info to show in here......</p>
        </div>
        </div> <!-- details -->

$(document).ready(function (){

    $(".info").hide();
        $(".show").click(function(event) {
        $(this).parent(".details").children("div.info").slideToggle(300);
        $(this).text($(this).text() == 'Read More...' ? 'Read Less...' : 'Read More...');
    });

});

Thanks!

Gunpowder

Answer 1

You can eliminate the jumpiness by removing the margin on the last child element the sliding container. I believe it has something to do with jquery calculating the height including the margin, then when display block is applied the margins collapse on the others.

.info p{
    margin-bottom:0;
}

http://jsfiddle.net/QzStg/4/

Alcaic

Could someone explain this behavior? – Ascidian

@Ascidian I believe the explanation is in the answer: "I believe it has something to do with jquery calculating the height including the margin, then when display block is applied the margins collapse on the others." – Gunpowder

I also believe it is related to jquery calculating the margin. I have a similar scenario and changing the margin-bottom to padding-bottom of the divs I am toggling resolved the jumpiness issue. – Unreal