Here's my problem, I have a piece of jquery that works fine in modern browsers, but won't work in IE7.
The idea is when you click on one of the < A > tags, the div called "innerdetails" will open.
Here's my HTML:
<ul class="table">
<li><a href="#">CLICK HERE</a></li>
<li><a href="#">Techniques</a> </li>
<li >3</li>
<div class="innerdetails">
Technical services, including MARC.
</div>
</ul>
Here's the offending Jquery code.
$(document).ready(function() {
$("ul.table li a").click(function() {
$(this).parent("li").parent("ul").children(".innerdetails").toggle();
alert ( $(this).parent("li").parent("ul").children(".innerdetails").length )
return false;
});
});
The interesting thing is that in the alert, IE7 returns "0" as length for .children(".inner-course-details")
Chrome returns "1"
The issue is likely due to the fact that this isn't valid HTML (a ul
tag can't contain a div
tag), so IE7 probably doesn't consider it part of the DOM tree.
To fix, try putting the div
inside of an li
tag (or just using an li
tag instead), then .toggle()
ing the li
.