Your help would be very very much appreciated. I spend 4 hours trying to figuring this out, but was not successful, albeit it is a very easy example:
Given the following (full running and Copy and Paste ready) example, I have two Strange Problems (occurring both on IE and Firefox):
1.) When having the line <div id="notexid" style="clear:both;"> with the following style tag: "style="clear:both;", the problem is, that the Toggle Display does not "hide/slide in the layer. Whenever you click the link, the Layer only slides out (but that is of course not intended. It should slide in on the first click and slide out on the next click....) => So the style="clear:both;" breaks the jQuery toggle Function, but why??
2.) If I remove the style="clear:both;" (which seem to cause this problem) then I get another strange behaviour that the Element to Toggle is displayed (=the rendering of the slide) not in its correct position but rather on the right hand side and jumps then after rendering to the final position. But why is this rendering done on the righthand side, when it later jumps back to the correct position??? (So jQuery knows where the correct position actually is....)
I would really be grateful if someone can just confirm this is a strange bug in jQuery so I can submit this as bug. Or if someone has a solution to the problem this would be even more great!
Thank you very much!!
<!DOCTYPE HTML PUBLIC"-// W3C//DTD HTML 4.01 Transitional//EN"" http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
*.item {clear:both;}
*.item > *.label { display:block; float:left; width:150px; }
*.item > *.content { display:block; float:left; width:220px;}
</style>
<script type="text/javascript" language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<form method="GET" accept-charset="UTF-8" action="dddd">
<div class="item">
<span class="label">
<label for="note">Label 0
</label>
</span>
<span class="content">
<textarea id="coafasf" name="casfasfasf" cols="30" rows="4">
</textarea>
</span>
</div>
<script type="text/javascript">
function toggleElement() {
$("#notexid").slideToggle("slow");
}
$(document).ready ( function() {
$("#notexid").before('<div class="item"><span class="label"> <\/span><span class="content"><a href="javascript:toggleElement();"> CLICK HERE TO TOGGLE <\/a><\/span><\/div>');
}
);
</script>
<!-- INSERT style="clear:both;" Solves the formating Problem but results in a broken toggle -->
<div id="notexid" style="clear:both;">
<div class="item">
<span class="label">
<label for="note">Label 1
</label>
</span>
<span class="content">
<textarea id="test" name="test" cols="30" rows="2">
</textarea>
</span>
</div>
</div>
<div class="item">
<span class="label">
<label for="teasst">Label 2
</label>
</span>
<span class="content">
<input id="aaaaaa" name="asdfasfasf" type="text">
</span>
</div>
</body>
</html>