Reputation: 47
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
Reputation: 4866
instead of:
$(page).slideToggle("fast");
use:
$(this).siblings('.pageLevel').slideToggle("fast");
example at:
Edit: so you don't really need this line at all:
var page = $(".subdomainLevel").children(".pageLevel");
Upvotes: 3