Question

When i click over the first DIV, the slideToggle effect is done correctly.
When i click over the 2nd one, it seems like it doesn’t apply the effect and the content just appear suddenly.

The same occurs with the 3rd element and with any other one but the first.

What’s going on?
(demo working here: http://jsfiddle.net/SW5sc/6/ )

I have this HTML structure:

<div class="subcategory">Option 1 </div>
<div class="subcategoryContent">

    <div class="subcategoryOption">
        <div class="image">
            <img src="vista/imgs/grupales.gif" alt="Clases grupales" />
        </div>

        <div class="text">
            TEXT
        </div>
    </div>

</div>

<div class="subcategory">Option 2</div>
<div class="subcategoryContent">
    <div class="subcategoryOption">
        <div class="image">
            <img src="vista/imgs/grupales.gif" alt="Clases grupales" />
        </div>

        <div class="text">
            TEXT
        </div>
    </div>
</div>

And this jQuery code:

$(".subcategory").click(function () {
                    $(this).next(".subcategoryContent").slideToggle(450).siblings(".subcategoryContent").slideUp(450);
                    return false;
                });

Answer 1

Remove all the “float”-properties from the CSS, and it’ll work just fine! 🙂 The floats ruin the animations..