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

Question

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

user113716 · Accepted Answer · 2011-02-11T01:10:22.293

5

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

edited Feb 11 '11 at 01:10

answered Feb 11 '11 at 00:19

user113716

318,772
63
451
440

Thank you. The second one was just what I needed! Is there a way to do the same thing (callback) with a#slide-toggle? Right now, when I click on it while the slide is down, it removes the class right away. I'd like to wait until the animation is finished. – J82 Feb 11 '11 at 00:29
@John: Sure. Any animation in jQuery can accept a *callback*, which is simply a function that is called when the animation is complete. So do just like the code above, and pass a function to the `slideUp` or `slideDown`, placing your code inside it. – user113716 Feb 11 '11 at 00:32
Thanks, Patrick. I tried what you suggested but I guess I messed something up because it's not working. Can you take a look at the code in the edited post and let me know where I went wrong? – J82 Feb 11 '11 at 00:43
@John: You're close. Just misplaced the closing `)` for the `slideUp`. Instead of after the `}` for the function, you have it after the `}` for the `if()`. Just move it up a line and you'll be set. I'll post it in my answer. – user113716 Feb 11 '11 at 00:53
@Patrick: I changed the misplaced parenthesis (actually copied and pasted your code just to be safe) but now the active class doesn't get removed at all. Any ideas? – J82 Feb 11 '11 at 00:58
@John: Sorry, I missed that you were using `this` to reference the element. Inside the callback function, `this` refers to the element getting the `slideUp`. The best thing to do is store a reference to the `slide-toggle` element outside of the callback, then refer to it inside. I'll update. – user113716 Feb 11 '11 at 01:08
...I just updated, but I'm a little confused as to which element should be getting the class. I assume the 'active' class goes to the `slide-toggle` element? – user113716 Feb 11 '11 at 01:11
Yes, that is correct. I just tried your updated code and it works perfectly. Thank you so much for taking the time to help me out! – J82 Feb 11 '11 at 01:15

score 0 · Answer 2 · answered Feb 11 '11 at 00:17

just add:

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

        // removing active class for active element
        $('a.active').removeClass('active');

        if ($('.slide-container').is(':visible')) {
            $('.slide-container').slideUp();
        } 
        else {
            $('.slide-container').slideDown();
            $(this).addClass('active');
        }
    });
});

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

2 Answers2

Linked