slideToggle and :visible

Question

When using the sliderToggle method, the :visible expression never seems to return anything other than true.

If I manually use show/ hide in conjunction with :visible expression it'll work just fine.

Example of failure:

jQuery(".fileNode .nodeExpander").click(function() {
    var notes = jQuery(this).parent().siblings(".fileNotes");
    notes.slideToggle ("fast");

    var isVisible = notes.is(":visible"); // Always returns true...

    // Do stuff based on visibility...
});

Example of working:

jQuery(".fileNode .nodeExpander").click(function() {
    var notes = jQuery(this).parent().siblings(".fileNotes");
    var isVisible = notes.is(":visible");

    if (isVisible)
        notes.hide("fast");
    else
        notes.show("fast");

    // Do stuff based on visibility...
});

Some html:

<ul>
    <li class="fileNode">
        <img src="<%= Url.Content ("~/Images/Collapse.png") %>" alt="<%= UIResources.CollpaseAltText %>" class="nodeExpander" />
    </li>
    <li class="fileLink">
        <%= Html.ActionLink (file.Name, "Details", new { id = file.FileId }) %>
    </li>
    <li class="fileNotes">
        <%= file.Description %>
    </li>
</ul>

I'm assuming that the slideToggle doesn't do a show/ hide - is there something else I can check?

I've tried in Firefox 3.5, IE 7, 8 and Chrome 4...all with the same results.

Thanks, K

Solution 1

Your first (non-working) code fragment will be testing :visible while slideToggle is mid-transition (more precisely, it tests it just after the transition starts.) Regardless of whether you're opening or closing, the mid-transition state will be :visible - so you always get true.

Try checking .is(":visible") before calling slideToggle

Solution 2

Try adding a handler.

notes.slideToggle ("fast", function() { 
  var isVisible = notes.is(":visible");
});