SlideToggle child classes of clicked parent

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

Leave a Reply

Your email address will not be published. Required fields are marked *