This JQuery code to toggle a div doesn't work in IE7, but works in other browsers

Question

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"

Answer 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.

Answer 2

I don't know exactly why but if you change the children to find it works

$("ul.table li a").click(function() {
    $(this).parent("li").parent("ul").find(".innerdetails").toggle();
    alert ( $(this).parent("li").parent("ul").find(".innerdetails").length )
    return false;
});

And the jsfiddle http://jsfiddle.net/6heVt/2/