jquery: find the div under li element

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

<ul id="menu">
                <li  class="menu_item"><a  href="content.html">Dosing Options</a> <a href="/index.html" class="home"></a></li>
                <div class="data selected"><!--#include virtual="includes/landing_pages/dosing.html" --></div>
                <li  class="menu_item"><a href="content.html">Efficacy Data</a></li>
           开发者_开发问答     <div class="data"><!--#include virtual="/includes/landing_pages/efficacy.html" --></div>
                <li  class="menu_item"><a href="content.html">Stability</a></li>
                <div class="data"><!--#include virtual="/includeslanding_pages/stability.html" --></div>
            </ul>

Jquery:

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");


}

No need to complicate it, just use jQuery's toggle method:

DEMO: http://jsfiddle.net/CMzuv/1/

$('li a').click(function(e) {
    $(this).parent().next().slideToggle();
    e.preventDefault();
});