title: This JQuery code to toggle a div doesn't work in IE7, but works in other browsers
body: <p>Here's my problem, I have a piece of jquery that works fine in modern browsers, but won't work in IE7.</p>
  
  <p>The idea is when you click on one of the &lt; A > tags, the div called "innerdetails" will open.</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;ul class="table"&gt;
  &lt;li&gt;&lt;a href="#"&gt;CLICK HERE&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Techniques&lt;/a&gt; &lt;/li&gt;
  &lt;li &gt;3&lt;/li&gt;
  &lt;div class="innerdetails"&gt;
     Technical services, including MARC.
  &lt;/div&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here's the offending Jquery code.</p>
  
  <pre><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;
      });
  });
  </code></pre>
  
  <p>The interesting thing is that in the alert, IE7 returns "0" as length for .children(".inner-course-details")</p>
  
  <p>Chrome returns "1" </p>