I realized the solution to this problem while I was creating the documentation to ASK this question...so I am posting the answer if for no other reason than to keep me from wasting time on this in the future
+2
A:
If the content to be TOGGLEd is displayed (visible) when the page is rendered the functions would be in the following order, if the content is hidden originally then reverse the functions
<html>
<head>
<style>
#upperDiv {width:200px; height:20px; text-align:center; cursor:pointer; }
#lowerDiv {width:200px; height:20px; background-color:red; border:#206ba4 1px solid;}
</style>
<script language="Javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/JavaScript">
$(function(){
$('#upperDiv').toggle (
function(){
$("#lowerDiv").hide() ;
},
function(){
$("#lowerDiv").show() ;
}
); // End toggle
}); // End eventlistener
</script>
</head>
<body>
<div id="upperDiv" >Upper div</div>
<div id="lowerDiv" >Lover Div</div>
</body>
</html>
CarolinaJay65
2008-11-13 21:11:45
+2
A:
toggle() is pretty buggy at times, i've had it do odd things to checkmarks (unchecking them) and other assorted issues. i'd suggest just handling it using a click event, much less minor annoyances. and this way, you don't have to worry about what state #lowerDiv is in in the first place:
$('#upperDiv').click(function() {
$('#lowerDiv').animate({
'opacity' : 'toggle',
});
});
Owen
2008-11-13 21:15:46
thanks, I'll give that some consideration
CarolinaJay65
2008-11-13 21:29:20