CODEWITHSUNDEEP
jquery
Threaded
Threaded

Reputation: 71

How to prevent the extra click when using jQuery toggle

I am using a toggle effect to display a slideshow which is functioning as a quick, visual selector for choosing beer manufacturers. An example of this can be found here:

http://srperrott.silverjerk.com/products/domestic/millercoors

The problem is, I have to effectively click the selected trigger twice in order for the toggle to take affect. Here is my code: 

$(document).ready(function(){
    $(".quick-brew-header").toggle(function(){
        $(".zone-preface-wrapper").animate({height:40},40);
    },function(){
        $(".zone-preface-wrapper").animate({height:165},40);
    });
});

And in my CSS I've declared that the starting height of .zone-preface-wrapper be 40px.

It seems there should be an easy fix for this. I definitely would appreciate any help in finding a resolution to this issue.

Upvotes: 1

Views: 99

Answers (1)

Fenton
Fenton

Reputation: 250922

If the element starts at 40, your first argument animates to 40 - so you see no change.

By switching the two toggle handlers, you should see the change to 165 on the first click.

$(".quick-brew-header").toggle(
    function() {
        $(".zone-preface-wrapper").animate({height:165},40);
    },
    function() {
        $(".zone-preface-wrapper").animate({height:40},40);
    }
);

Upvotes: 7

Related Questions