jquery toggle display

Question

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?

<script>
$(document).ready(function(){

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


<pre>
<dl>
    <dt><a href="/">jQuery</a></dt>
    <dd>
    <ul>
     <li><a href="/src/">Download</a></li>
     <li><a href="/docs/">Documentation</a></li>
     <li><a href="/blog/">Blog</a></li>

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

Answer 1

There are a couple of problems here.

1. $("dt a") - your selector is wrong as you don't have any "a" links. Should be $("dt") (I based this on the initial malformated html - when I got that from the source, it didn't have a links)

2. $(e.target).children("dd") isn't correct as "dd" is a sibling of dt in your HTML.

Here's a working example:

$(document).ready(function() {
    $("dt a").click(function(e) {
        $(e.target).parent().next().toggle();
        return false;
    });
});

Answer 2

A few notes:

1. "i can't get it to work" is no problem description. What is displayed? What do you do? What do you expect to happen? What is in fact happening?
2. Without the HTML code this is very hard to answer.
3. dd is not normally a child of dt, but a sibling.

Answer 3

try something like:

$("dt a").click(function(){
    $(this).parent().next("dd:first").toggle();    
    return false;
});

Answer 4

The other respondents are right about your dd selector not being right. e.target is the a, which has only text as its child, not the dd you're looking for. And as Marc pointed out (edit: before he deleted his answer), you want to return false from the click handler.

I like to work with classes when doing this sort of thing since it makes the code explicit and not dependent on the structure of the DOM.

Something like this:

<script>
$(document).ready(function(){

        $("dt a").click(function(e){
                // Toggle elements whose class is named by the anchor class
                $('dd.'+this.className).toggle(); 
                return false;
        });
});
</script>
<style>
dd{display:none;}
</style>


<pre>
<dl>
    <dt><a class='jQuery' href="/">jQuery</a></dt>
    <dd class='jQuery'>  <!-- Set the class name to the anchor class -->
    <ul>
        <li><a href="/src/">Download</a></li>
        <li><a href="/docs/">Documentation</a></li>
        <li><a href="/blog/">Blog</a></li>

    </ul>
...

If you don't care about your structure changing, though, tanathos' solution will work just fine.