CODEWITHSUNDEEP
javascriptjqueryjquery-ui
tariq
tariq

Reputation: 2258

Functionality breaks when using toggle with 'slow' option

The problem is that when i use the toggle function without any options i.e default options the 'is(':visible')' on the item returns me the correct state.

However when i use toggle("slow"), it reveals incorrect state and always shows the item operated upon by the toggle as visible false. Of course i am checking that inside the callback function so as to be sure that the animation is complete.

please look at the below code

jQuery(document).ready(function () {
    var h3 = jQuery("#myAccordion").find('h3');
    jQuery("#myAccordion").find('h3').find('span').addClass("ui-state-active ui-icon");
    jQuery.each(h3, function () {
        jQuery(this).bind('click', function () {
            jQuery(this).next('div').toggle("slow", "swing", callback);
        });
    });
});

function callback () {
    if (jQuery(this).next('div').is(':visible')) {
        alert('visible--' + jQuery(this).next('div').is(':visible'));
        jQuery(this).find('span').removeClass("ui-state-default ui-icon").addClass("ui-state-active ui-icon");
    }
    else {
        alert('visible--' + jQuery(this).next('div').is(':visible')); // always goes into this 'else' even though the item is visible.
        jQuery(this).find('span').removeClass("ui-state-active ui-icon").addClass("ui-state-default ui-icon");
    }
}

However the same works perfectly fine when not using the "slow" option with toggle.

Update 2: Check this out here http://jsfiddle.net/tariquasar/7xt7D/2/

Any pointers...

Update 1: This is the fiddle http://jsfiddle.net/tariquasar/7xt7D/

Upvotes: 1

Views: 169

Answers (1)

clu3Less
clu3Less

Reputation: 1882

The context this is not extended to the callback function too. You could try doing this. I have updated the jsfiddle (click here). Ill paste the same here.

jQuery(document).ready(function () {
    var h3 = jQuery("#myAccordion").find('h3');
    jQuery("#myAccordion").find('h3').find('span').addClass("ui-state-active ui-icon"); // first the item is visible
    jQuery.each(h3, function () {
        jQuery(this).bind('click', function () {
console.log(this);
            jQuery(this).next('div').toggle("slow","swing",callback(this));
        });
    });
});

function callback (that) {
    setTimeout( function () {
        console.log(jQuery(that).next('div').is(':visible'));
    if (jQuery(that).next('div').is(':visible')) {
        alert('visible--' + jQuery(that).next('div').is(':visible'));
        jQuery(that).find('span').removeClass("ui-state-default ui-icon").addClass("ui-state-active ui-icon");
    }
    else {
        alert('visible--' + jQuery(that).next('div').is(':visible'));
        jQuery(that).find('span').removeClass("ui-state-active ui-icon").addClass("ui-state-default ui-icon");
    }
    }, 1000);
}

I have added a SetTimeout to get the result you wanted. The callback function is called after the animation completes. Yes. But not after the CSS changes to display:none. CSS change happens a few millisecs later.

However the same works perfectly fine when not using the "slow" option with toggle.

I'm not really sure about how you got it working with options other than slow

Upvotes: 1

Related Questions