Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I remove this class after the jquery slide is in the up position?

Tags:

jquery

slide

I currently have the following code set up for a jQuery slide.

$(document).ready(function () {
    $('a#slide-up').click(function () {
        $('.slide-container').slideUp();
        return false;
    });
    $('a#slide-toggle').click(function () {
        if ($('.slide-container').is(':visible')) {
            $('.slide-container').slideUp();
            $(this).removeClass('active');
        } else {
            $('.slide-container').slideDown();
            $(this).addClass('active');
        }
    });
});

And the html:

<a id="slide-toggle"></a>

<div class="slide-container">
     <a id="slide-up"></a>
     >>content<<
</div>

When I click on #slide-toggle, the class 'active' gets applied to it and div.slide-container slides down revealing the content and another link to slide the container back up (i.e a#slide-up). When I click on a#slide-up, the container slides back up but a#slide-toggle remains "active" with the class applied to it.

I want it so that when I click on a#slide-up, the 'active' class gets removed. How can I do this?

-edit-

$(document).ready(function() {
    $('a#slide-up').click(function () {
        $('.slide-container').slideUp(function(){
            $('#slide-toggle').removeClass('active');
        });
        return false;
    });

    $('a#slide-toggle').click(function() {
        if ($('.slide-container').is(':visible')) {
            $('.slide-container').slideUp(function() {
            $(this).removeClass('active');
            }
        })
        else {
            $('.slide-container').slideDown();
            $(this).addClass('active');
        }
    });
});
like image 617
J82 Avatar asked Feb 11 '11 00:02

J82


People also ask

How to remove a class from jQuery?

jQuery removeClass() Method The removeClass() method removes one or more class names from the selected elements. Note: If no parameter is specified, this method will remove ALL class names from the selected elements.

Which jQuery method is used to slide up an element?

The jQuery slideUp() method is used to slide up an element. Syntax: $(selector).slideUp(speed,callback);

How do you toggle slideUp and slideDown in jQuery?

The slideToggle() method toggles between slideUp() and slideDown() for the selected elements. This method checks the selected elements for visibility. slideDown() is run if an element is hidden. slideUp() is run if an element is visible - This creates a toggle effect.


1 Answers

Just remove the class in the handler for the #slide-up button:

$('a#slide-up').click(function () {
    $('.slide-container').slideUp();
    $('#slide-toggle').removeClass('active');
    return false;
});

or if you want it to wait until the animation is complete, do it in a callback:

$('a#slide-up').click(function () {
    $('.slide-container').slideUp(function(){
        $('#slide-toggle').removeClass('active');
    });
    return false;
});

Regarding your comment:

$('a#slide-toggle').click(function() {
       // keep a reference to the slide-toggle element
    var slideToggle = this;
    if ($('.slide-container').is(':visible')) {
        $('.slide-container').slideUp(function() {
            $(slideToggle).removeClass('active'); // remove class from slide-toggle
        }); // <-- moved the closing ) to here
    }       // <-- instead of here
    else {
        $('.slide-container').slideDown();
        $(slideToggle).addClass('active'); // add class to slide-toggle
    }
});
like image 180
user113716 Avatar answered Sep 18 '22 17:09

user113716