trouble traversing the DOM

Question

I have some HTML that looks likes this,

<dl class="dropdown">  
    <dt><span>Gender</span><a href="">Go</a></dt>
    <dd class="shadow_50">  
        <ul>  
            <li><a href="#"><span class="option">male</span><span class="value">1</span></a></li>  
            <li><a href="#"><span class="option">female</span><span class="value">2</span></a></li>
       </ul>  
    </dd>
 </dl>

The DD is set to be hidden when the GO link is clicked I have some code that slides the DD down or up. However my question is that when I have more than one instance if these in a page, one click opens all the DD on the page, how can I target the DD that is closest to click,

I have tried the following,

$(".dropdown dt a").click(function(e) {
    $(this).closest("dd").slideToggle(defaults.speed);
e.preventDefault();
});

and also this,

$(".dropdown dt a").click(function(e) {
    $(this).next("dd").slideToggle(defaults.speed);
    e.preventDefault();
});

I have had no success yet though.

Answer 1

Have you tried:

$(".dropdown dt a").click(function(e) {
    $(this).closest("dl").find("dd").slideToggle(defaults.speed);
    e.preventDefault();
});

Youc't use next() because your link has only a SPAN as a sibling and you can't use closest because it just walks up the tree