selecting and displaying multiple children within a definition list using next
<p>i wish to display the 3<code>&lt;dd&gt;</code> when i click on the <code>&lt;dt&gt;</code> and it hides the <code>&lt;dd&gt;</code> which are not children of that particular <code>&lt;dt&gt;</code></p>

<pre><code>&lt;dl&gt;
    &lt;dt&gt;Home
        &lt;dd&gt;&lt;a href="#"&gt;Link1&lt;/a&gt;&lt;/dd&gt;
        &lt;dd&gt;&lt;a href="#"&gt;Link1&lt;/a&gt;&lt;/dd&gt;
        &lt;dd&gt;&lt;a href="#"&gt;Link1&lt;/a&gt;&lt;/dd&gt;
    &lt;/dt&gt;
    &lt;dt&gt;Products
        &lt;dd&gt;&lt;a href="#"&gt;Link2&lt;/a&gt;&lt;/dd&gt;
        &lt;dd&gt;&lt;a href="#"&gt;Link2&lt;/a&gt;&lt;/dd&gt;
        &lt;dd&gt;&lt;a href="#"&gt;Link2&lt;/a&gt;&lt;/dd&gt;
    &lt;/dt&gt;
    &lt;dt&gt;Downloads
        &lt;dd&gt;&lt;a href="#"&gt;Link3&lt;/a&gt;&lt;/dd&gt;
        &lt;dd&gt;&lt;a href="#"&gt;Link3&lt;/a&gt;&lt;/dd&gt;
        &lt;dd&gt;&lt;a href="#"&gt;Link3&lt;/a&gt;&lt;/dd&gt;
    &lt;/dt&gt;
    &lt;dt&gt;Services
        &lt;dd&gt;&lt;a href="#"&gt;Link4&lt;/a&gt;&lt;/dd&gt;
        &lt;dd&gt;&lt;a href="##"&gt;Link4&lt;/a&gt;&lt;/dd&gt;
        &lt;dd&gt;&lt;a href="#"&gt;Link4&lt;/a&gt;&lt;/dd&gt;
    &lt;/dt&gt;
    &lt;dt&gt;About Us
        &lt;dd&gt;&lt;a href="#"&gt;Link5&lt;/a&gt;&lt;/dd&gt;
        &lt;dd&gt;&lt;a href="#"&gt;Link5&lt;/a&gt;&lt;/dd&gt;
        &lt;dd&gt;&lt;a href="#"&gt;Link5&lt;/a&gt;&lt;/dd&gt;
    &lt;/dt&gt;
&lt;/dl&gt;
</code></pre>

<p>but it only shows only one <code>dd</code>  when i click on <code>&lt;dt&gt;</code>how do i display the remaining <code>&lt;dd&gt;</code> while hiding those <code>&lt;dd&gt;</code> which arent children of the <code>&lt;dt&gt;</code> i had clicked on
here is the code</p>

<pre><code>$("dt").on({
   click:function  () {
     $(this).next("dd").slideDown(500).siblings("dd").hide();
   },
})
</code></pre>
