CODEWITHSUNDEEP
jquerytoggle
joolz84
joolz84

Reputation: 47

JQuery: Accordion style menu toggle

I'm trying to make a simple accordion style menu using divs:

<div class="subdomainLevel">
    Subdomain <a href="#" class="pageToggle">open/close</a>

    <div class="pageLevel">Page Level <a href="#" class="messageToggle">open/close</a>
        <div class="pageMessage">Message</div>
    </div>

</div>

<div class="subdomainLevel">
    Subdomain <a href="#" class="pageToggle">open/close</a>

    <div class="pageLevel">Page Level <a href="#" class="messageToggle">open/close</a>
        <div class="pageMessage">Message</div>
    </div>

</div>

My jquery is as follows:

var page = $(".subdomainLevel").children(".pageLevel");
$(".pageToggle").click(function () {
    $(page).slideToggle("fast");
});

How can I make my JQuery reusable so that when I click on my "open/close" link, the link only controls the child of that div and not the other divs on the page with the same class.

Thanks,

Upvotes: 2

Views: 716

Answers (2)

gilly3
gilly3

Reputation: 91707

Try this:

$(this).next(".pageLevel").slideToggle("fast");

Upvotes: 1

WooDzu
WooDzu

Reputation: 4866

instead of:

 $(page).slideToggle("fast");

use:

$(this).siblings('.pageLevel').slideToggle("fast");

example at:

http://jsfiddle.net/2CEmx/

Edit: so you don't really need this line at all:

var page = $(".subdomainLevel").children(".pageLevel");

Upvotes: 3

Related Questions