CODEWITHSUNDEEP
jqueryhtmldom
marsalal1014
marsalal1014

Reputation: 1907

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


}

Upvotes: 0

Views: 1491

Answers (1)

wesbos
wesbos

Reputation: 26317

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();
});

Upvotes: 2

Related Questions