Question

thanks for any help.. here is my problem:
The code below, when clicking on the Read More… link is supposed to show the div under the link, but only after all other possible divs are hidden…
I need to use it in the callback as is, but when used as such, the first link displays correctly, and the last three show, then hide, then show… help!

Javascript:

var more_text="Read More...";
var less_text="Read Less...";

jQuery(document).ready(function() {
    $j(".dropdown").click( function () {
        if ($j(this).html() == more_text){
            var that = $j(this);
            $j(".extra").slideUp( function () {
                $j(".dropdown").html(more_text);
                that.html(less_text);
                that.next(".extra").slideDown();
            });
        }
    });
});

HTML:

<div class="dropdown">Read More...</div>
<div class="extra" style="display: none;">Here is more text!!</div>

<div class="dropdown">Read More...</div>
<div class="extra" style="display: none;">Here is more text!!</div>

<div class="dropdown">Read More...</div>
<div class="extra" style="display: none;">Here is more text!!</div>

<div class="dropdown">Read More...</div>
<div class="extra" style="display: none;">Here is more text!!</div>

Answer 1

The problem is that when you call $j(".extra").slideUp(... some of the elements with class extra are already hidden, so those cause the callback to fire immediately, then when the one that needs to close is done closing you get the callback fired again. Change that line to:

$j(".extra").slideUp().promise().done( function () {

and I think it will work the way you are expecting it to.