jquery toggle display
<p>I'd like to create a list and be able to toggle the display of children items on click. Should be simple but i can't get it to work. Any thoughts?</p>

<pre><code>&lt;script&gt;
$(document).ready(function(){

 $("dt a").click(function(e){
  $(e.target).children("dd").toggle(); 
 });
});
&lt;/script&gt;
&lt;style&gt;
dd{display:none;}
&lt;/style&gt;


&lt;pre&gt;
&lt;dl&gt;
    &lt;dt&gt;&lt;a href="/"&gt;jQuery&lt;/a&gt;&lt;/dt&gt;
    &lt;dd&gt;
    &lt;ul&gt;
     &lt;li&gt;&lt;a href="/src/"&gt;Download&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="/docs/"&gt;Documentation&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="/blog/"&gt;Blog&lt;/a&gt;&lt;/li&gt;

    &lt;/ul&gt;
    &lt;/dd&gt;
    &lt;dt&gt;&lt;a href="/discuss/"&gt;Community&lt;/a&gt;&lt;/dt&gt;
    &lt;dd&gt;
    &lt;ul&gt;
     &lt;li&gt;&lt;a href="/discuss/"&gt;Mailing List&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="/tutorials/"&gt;Tutorials&lt;/a&gt;&lt;/li&gt;    
     &lt;li&gt;&lt;a href="/demos/"&gt;Demos&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="/plugins/"&gt;Plugins&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/dd&gt; 
&lt;/dl&gt;
&lt;/pre&gt;
</code></pre>
