CODEWITHSUNDEEP
jquery
Faizan
Faizan

Reputation: 776

Set Offset is jQuery's Toggle Slide

$('.shutter').bind("click", function () {
    $(".expander").slideToggle("800", "easeOutCubic");
});

but if I do not want the expander's height= 0;

If I want the height = 20px (offset) after applying slide up, so my question is that, is there any possible way to set Offset in toggleSlide method or any alternate? Like:

$('.shutter').bind("click", function () {
    $(".expander").slideToggle{20, ("800", "easeOutCubic")};
});

I know above example is not the correct one, but it just an example to show you what I want..

Upvotes: 0

Views: 897

Answers (2)

James Craig
James Craig

Reputation: 6854

For applying height: 20px; after the slideToggle, add a callback:

$('.shutter').bind("click", function() {
        $(".expander").slideToggle("800", "easeOutCubic", function() {
            $(this).css({'height':'20px'});
    });
});

UPDATE: After comments, you have used the easeOutCubic improperly, instead use it like:

$('.shutter').bind('click', function() {
    if($('.expander').attr('style') == 'height: 20px;') {
        $('.expander').animate({'height':'200px'}, 800);
    } else {
       $('.expander').animate({'height':'20px'}, 800);
    }
});

Here's a JSFiddle

Upvotes: 1

A. Wolff
A. Wolff

Reputation: 74420

You could animate the height instead of using slideToggle() method:

jsFiddle

 $('.shutter').bind('click', function () {
     var $expander = $('.expander');
     $expander.finish().animate({
         height: $expander.height() === 200?20:200
     }, '800',"easeOutCubic");
 });

Upvotes: 0

Related Questions