How can I tell what the visibility state of an element is which has
just been toggled? Is my selector no good or is it a matter of timing?

. The situation is that I'm displaying a page of search results. I'd
like the "advanced" search features to be present at the top but I'd
prefer to hide them. So, I'm creating a link which will toggle the box
display. What I haven't been able to figure out is how to swap the
text of the link depending upon the state of the box. Or, rather, it
will change to "hide form" the first time the box is displayed but
remains that way ever after.

Here's the code I'm working with:

$(function() {
        $('#advanced_search').hide().after('<a href="#"
id="toggle_form">refine search</a>');
        
        $('#toggle_form').css('float', 'right').click(function(e)
        {
                e.preventDefault();
                $('#advanced_search').toggle('fast');
                $(this).text($('#advanced_search:visible').length ? 'hide form' 
:
'refine search');
        });
});

I also tried:

        $('#toggle_form').css('float', 'right').click(function(e)
        {
                e.preventDefault();
                var search = $('#advanced_search');
                
                search.toggle('fast');
                $(this).text(search.css('display') == 'block' ? 'hide form' :
'refine search');
        });

Reply via email to