Question

I have the following code, it slides down, but not up. Please could you help me find the error, and also if maybe there is a better way to do this, I have tried slideToggle, but that does not make it possible to check the state of the element, for where using hide and show you can check $('#my_div').is(':hidden').

Here is my code:

$("a.advanced_search_toggle").click(function() { 
    if ($("#advanced_search_box").hasClass('closed')) {
        $("#advanced_search_box").slideDown(function(){
            $("a.advanced_search_toggle").text('Simple Search');
            $("a.advanced_search_toggle").removeClass('down_arrow');
            $("a.advanced_search_toggle").addClass('up_arrow')
            $("a.advanced_search_toggle").removeClass('closed');
            $("a.advanced_search_toggle").addClass('open'); 
        });
    } else {
        $("#advanced_search_box").slideUp(function(){
            $("a.advanced_search_toggle").text('Advanced Search');
            $("a.advanced_search_toggle").removeClass('up_arrow');
            $("a.advanced_search_toggle").addClass('down_arrow');
            $("a.advanced_search_toggle").removeClass('open');
            $("a.advanced_search_toggle").addClass('closed');                       
        });         
    }
    return false;
}); 

Please note that by default I add a class of closed to #advanced_search_box

Answer 1

You are trying to modify the attributes of the link instead of the element. In addition, cache your objects by assigning the objects to a variable, which helps for simpler reference and optimization. Try the following:

$("a.advanced_search_toggle").click(function() {
    var link = $(this);
    var box = $("#advanced_search_box");
    if (box.hasClass('closed')) {
        box.slideDown(function(){
            link.text('Simple Search').removeClass('down_arrow').addClass('up_arrow');
            box.removeClass('closed').addClass('open');
        });
    } else {
        box.slideUp(function(){
            link.text('Advanced Search').removeClass('up_arrow').addClass('down_arrow');
            box.removeClass('open').addClass('closed');                    
        });         
    }
    return false;
});

Demo: http://jsfiddle.net/m9XMn/