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