CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Matt
Matt

Reputation: 422

jQuery slideUp() and slideDown() functions are firing at odd times

I've provided a fiddle with the issue here: https://jsfiddle.net/uLkx45aL/2/

$('.contact-social a').click(function() {
    $('.contact-social a').removeClass('active');
    $(this).addClass('active');
    var className = $('.contact-social a.active').attr('className');
    $('.contact-wrap .content').slideUp('fast', function() {
        $('.contact-wrap .'+className).slideDown('slow');
    });
});

The above is the jQuery that I've used, and the general idea is that when a user clicks on of the icons along the bottom, then the current form/div slides up, and the one they selected scrolls down.

However currently it slides down twice before becoming fixed so I'm assuming there is an error in the jQuery but I can't figure it out.

Any help is much appreciated!

Edit: Doesn't happen with the Facebook one for some reason

Upvotes: 2

Views: 123

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241138

The problem is that you are sliding all the .content elements up. To resolve the issue you are seeing, you could use the :visible selector in order to select the visible .content element, and then slide it up:

Updated Example

$('.contact-social a').click(function () {
    $('.contact-social a').removeClass('active');
    $(this).addClass('active');
    var className = $('.contact-social a.active').attr('className');
    $('.contact-wrap .content:visible').slideUp('fast', function () {
        $('.contact-wrap .' + className).slideDown('slow');
    });
});

Upvotes: 2

Related Questions