Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

slideToggle and :visible

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

like image 900
Kieron Avatar asked Aug 28 '09 08:08

Kieron


People also ask

What is slideToggle?

Definition and Usage. The slideToggle() method toggles between slideUp() and slideDown() for the selected elements. This method checks the selected elements for visibility. slideDown() is run if an element is hidden. slideUp() is run if an element is visible - This creates a toggle effect.

How does slideToggle work?

slideToggle() method animates the height of the matched elements. This causes lower parts of the page to slide up or down, appearing to reveal or conceal the items. If the element is initially displayed, it will be hidden; if hidden, it will be shown.


2 Answers

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

like image 103
searlea Avatar answered Sep 21 '22 01:09

searlea


Try adding a handler.

notes.slideToggle ("fast", function() { 
  var isVisible = notes.is(":visible");
});
like image 42
Andy Gaskell Avatar answered Sep 19 '22 01:09

Andy Gaskell