slideToggle shows result..but why dont I see it in debugger?
Hello guys,
I have following HTML structure:
<div style='display:inline-block;'>
<a href='#' id='offsetWellDataExtension' onclick='javascript:return ToggleOffsetDataDetail(this);'>Show Details</a>
<div style='display:none' class='detailsHolder'>
Item 1
Item 2
Item 3...
</div>
</div>
The idea is when Show Details is clicked, the div with items shows or hides. When shown, the TEXT of Show Details A tag changes to Hide Details.
I got it working the following way:
function ToggleOffsetDataDetail(sender) {
if ($($($(sender).parent()).find('.detailsHolder'))[0].style.display == "block") {
// this will be hidden
$($(sender).closest("tr")[0]).css("vertical-align", "middle");
sender.innerHTML = "Show Details"
}
else {
$($(sender).closest("tr")[0]).css("vertical-align", "top");
sender.innerHTML = "Hide Details"
}
$($($(sender).parent()).find('.detailsHolder')).slideToggle();
var testValue = $($($(sender).parent()).find('.detailsHolder'))[0].style.display;
return false;
}
Here is what I don't understand:
I am using Visual Studio 2008 where I can put a break point in my javascript code. When I look at the value of testValue, initally it changes from 'none' to block -- which is what I expect, and the DIV data shows up. But when I "Hide Details", the value in testValue is still Block, while the div hides. Where is this magic happening? Also is there a cleaner way to do this?