Question

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.

Answer 1

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);
    }
);