using next to select multiple children of a particular html tag
<p>I am working on a effect using jquery where one hovers over a side bar and it displays a navigation bar but the navigation itself has some effect properties so that when one clicks on one <code>dd</code> it shows the 3 children<code>dt</code>and hides the rest but currently it shows only the first dt and hides the rest...and why doesnt the close method work here is the code.</p>

<pre><code>&lt;html&gt;
 &lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;script src="Jquery.js"&gt;
&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
&lt;div class="nav"&gt;
    &lt;dl&gt;
        &lt;dt&gt;
            &lt;dd&gt;One&lt;/dd&gt;
            &lt;dd&gt;Two&lt;/dd&gt;
            &lt;dd&gt;Three&lt;/dd&gt;
        &lt;/dt&gt;
        &lt;dt&gt;
            &lt;dd&gt;Four&lt;/dd&gt;
            &lt;dd&gt;Five&lt;/dd&gt;
            &lt;dd&gt;Six&lt;/dd&gt;
        &lt;/dt&gt;
        &lt;dt&gt;
            &lt;dd&gt;Seven&lt;/dd&gt;
            &lt;dd&gt;Eight&lt;/dd&gt;
            &lt;dd&gt;Nine&lt;/dd&gt;
        &lt;/dt&gt;
    &lt;/dl&gt;
&lt;/div&gt;  
&lt;div class="sideBar"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
    var Sides={ 
   sideBar:$("div.sideBar"),
    nav:$("div.nav"),
    dd:$("div.nav dd"),
     dt:$("div.nav dt"),
     init:function  () {

    Sides.sideBar.on("mouseenter",this.show);
    },
    show:function  () {
    Sides.nav.close.call(nav);
    Sides.nav.fadeIn(2000).filter(":nth-child(n+8)").hide();
    Sides.dd.on("click",function  () {
        Sides.dd.next("dt").slideDown(500).siblings("dt").hide();
    })
  },
  close:function  () {
    Sides.nav.on("mouseleave",function  () {
        $(this).fadeOut(1400)
    })
    }
     }
       Sides.init();

  &lt;/script&gt;

      &lt;/body&gt;
      &lt;/html&gt;
</code></pre>
