CSS transitions not executing at the same time

Question

I've created a super simple accordion where I use a h3/p setup and the ps initially have max-height: 0 but if the h3 has an .open class the p gets something like max-height: 100px (h3.open + p {max-height: 100px}).

Then I use a few lines of jQuery to add the open class to the clicked h3.

The problem I'm having is that when I click a heading it first slides out, and then like half a second later the other one slides back up. Why aren't the transitions executing at the exact same time?

Here's a fiddle: http://jsfiddle.net/2uhVY/

And here's all the code:

HTML

<div class="accordion">
    <h3>Some question</h3>
    <p>Some answer</p>
    <h3>Some question</h3>
    <p>Some answer</p>
    <h3>Some question</h3>
    <p>Some answer</p>
    <h3>Some question</h3>
    <p>Some answer</p>
</div>

CSS

.accordion {

}

.accordion h3 {
    margin: 0;
    cursor: pointer;
}

.accordion p {
    margin: 20px 0;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 1s;
    transition: max-height 1s;
}

.accordion h3.open + p {
    max-height: 100px;
}

JS (jQuery)

$(function () {
    var h3s = $('.accordion h3');

    h3s.click(function () {
        h3s.removeClass('open');
        $(this).addClass('open');
    });
});

Answer 1

The max-height is transitioning from 100px to 0. Your elements aren’t that tall, so their heights don’t actually start to change until near the end of the transition.