CODEWITHSUNDEEP
jqueryhtmlcss
Draven
Draven

Reputation: 1467

Problem with Jquery toggle / animate

My Website: http://www.daysofthedead.net

I have made 2 sliding panels on the right side of the screen. One for Facebook, the other for Twitter. You click the Facebook tab and it opens, then if you click the Twitter tab while the Facebook panel is still open then Facebook will close and Twitter will open, and vice-versa.

My Problem: You click once to open Facebook then open Twitter. After that you have to click each tab twice unless you close the panel before you open the second panel.

Can somebody take a look at my code below and help me figure out why it does this?

Take a look at the code here: http://jsfiddle.net/Draven/4BQAs/

Upvotes: 0

Views: 224

Answers (1)

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76870

I think that toggle was creating some problems, in this case you can just use click:

$('.panel-tab').click(function(event) {
    var that = this;
    if ($('.active').length > 0) {
        $('.active').animate({
            marginRight: '0'
        }, 1000,'linear', function() {
            var targetClosed = $(this).find('a').data('target');
            var targetOpen = $(that).data('target');
            if (targetClosed != targetOpen){
            $('#panel-' + targetOpen).animate({
                marginRight: '292'
            }, 1000).addClass('active');
        }
        }).removeClass('active');
    } else {
        $('#panel-' + $(this).data('target')).animate({
            marginRight: '292'
        }, 1000).addClass('active');
    }
});

fidlle here: http://jsfiddle.net/4BQAs/8/

Upvotes: 1

Related Questions