Question

I’ve created custom toggle slide animation. Its working fine as expected but its not sliding on first click. if you click on map arrow then you will see the toggle class will apply to it but map will not slide. but if you click twice more then it will slide.

I’m quite new to jquery and I’ve also searched alot on it but nothing find any solution. Here is the code;

$('.map_btn').click(function() {
    $('.map_btn').toggleClass('toggle');

    $('.map_btn').on('click', function() {
        $('.map_wrapper').stop().animate({
            opacity: 1,
            height: 420
        });
    });
    $('.map_btn.toggle').on('click', function() {
        $('.map_wrapper').stop().animate({
            opacity: 0,
            height: 0
        });
    });
});

http://jsfiddle.net/h2fh6/

Answer 1

The problem with your current solution is that the classes are getting messed up somewhere in the toggleClass() and also the fact that you’ve nested a click handler for .map_btn within another click handler for the same element.

The flow gets a bit messed up, hence.

You can try this,

$('.map_btn').toggle(function() {
    $('.map_btn').toggleClass('toggle');
    $('.map_wrapper').stop().animate({
        opacity: 1,
        height: 420
    });
}, function() {
    $('.map_btn').toggleClass('toggle');
    $('.map_wrapper').stop().animate({
        opacity: 0,
        height: 0
    });
});​

Use only the .toggle() so you don’t have to write 2 separate methods.

Fiddle link – http://jsfiddle.net/h2fh6/20/

You can read more about toggle here