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
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.
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.
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
Try adding a handler.
notes.slideToggle ("fast", function() {
var isVisible = notes.is(":visible");
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With