I want to loop through each div in pageHeadings, apply click function to each div that matches “heading.” Then, if I click on a heading, it will slideToggle the heading’s child class.
So, if I click on heading_about heading, it slideToggles menu_about child class.
What am I missing?
<div id="pageHeadings">
<div id="heading_practice">
<a href="#">
<p>Practice Areas</p>
</a>
<div class="menu_practice">
<p>test</p>
<p>test2</p>
</div>
</div>
<div id="heading_about">
<a href="#">
<p>About</p>
</a>
<div class="menu_about">
<p>test</p>
<p>test2</p>
</div>
</div>
</div>
$("#pageHeadings div[id^=heading]").click(function () { //apply click function to all headings
$('#' + this.id).children().slideToggle("fast");
//should show child class (click heading_about, it shows menu_about)
//instead shows child class, but also toggles heading
});
Answer
You can use the same technique as you did in selecting the heading part, use $(this).find and select the child with a class starting with ‘menu’:
$("#pageHeadings div[id^=heading]").click(function() {
$(this).find('[class^=menu]').slideToggle("fast");
});