title: jquery: find the div under li element
body: <p>I'm trying to develop a collapsible menu, so when the user clicks an option this displays the related content and if click it again it just "closes it up". I've tried .closest() or .next() but they seems not to work, I added classes to the elements to know which one has been selected or expanded and which not. Here's what I got, any help would be appreciated, thanks</p>
  
  <pre><code>&lt;ul id="menu"&gt;
                  &lt;li  class="menu_item"&gt;&lt;a  href="content.html"&gt;Dosing Options&lt;/a&gt; &lt;a href="/index.html" class="home"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;div class="data selected"&gt;&lt;!--#include virtual="includes/landing_pages/dosing.html" --&gt;&lt;/div&gt;
                  &lt;li  class="menu_item"&gt;&lt;a href="content.html"&gt;Efficacy Data&lt;/a&gt;&lt;/li&gt;
                  &lt;div class="data"&gt;&lt;!--#include virtual="/includes/landing_pages/efficacy.html" --&gt;&lt;/div&gt;
                  &lt;li  class="menu_item"&gt;&lt;a href="content.html"&gt;Stability&lt;/a&gt;&lt;/li&gt;
                  &lt;div class="data"&gt;&lt;!--#include virtual="/includeslanding_pages/stability.html" --&gt;&lt;/div&gt;
              &lt;/ul&gt;
  </code></pre>
  
  <p>Jquery:</p>
  
  <pre><code>if(!($(this).children("div:first").hasClass("selected"))){
      $(this).addClass("active");
      $(this).parent().addClass("selected");
      $(this).parent().children(".data:first").slideDown("fast");
  }else{
      $(this).removeClass("active");
      $(".menu_item.selected").next("div").slideUp("fast");
      $(this).parent().removeClass("selected");
  
  
  }
  </code></pre>