nested div toggle problem

Question

I have been struggling with this for days and I'm getting fed up :( I hope someone can figure this out? Ive got a set of divs (systems/blocks) each has a header h2 and a child div. Each child div (sub systems) each has a header h3 and a child div with some links. When I click on systemHeader I want to toggle only the subSystems div. When I click on subSystemHeader I want to toggle only reports div.

What is actually happening is that whatever i click on toggles the subSystems div! How can I make it work like it should and only toggle the first child div on each type of click?

<div class="pod">
    <li id='ThirdParty'>
        <div class='block'>
            <h1>ThirdParty</h1><img class='blockNoBorder' src='images/thirdparty.jpg' width="200"></img>
            <div class='systemHeader'>
                <h2><span>Bobs shop</span></h2>
                <div class='subSystems'>                    
                    <div class='subSystemHeader'>
                        <h3><span>&nbsp;Gifts</span></h3>
                        <div class='reports '>
                            <p class='reports i1'>
                                <a href='/Next.Whs.Web.MenuSystem/Default.aspx?id=470' title=''>Option 1</a></p>
                            <p class='reports i1'>
                                <a href='/Next.Whs.Web.MenuSystem/Default.aspx?id=471' title=''>Option 2</a></p>
                        </div>
                    </div>
                    <div class='subSystemHeader'>
                        <h3><span>&nbsp;Directory</span></h3>
                        <div class='reports hidden'>
                            <p class='reports i1'>
                                <a href='/Next.Whs.Web.MenuSystem/Default.aspx?id=466' title=''>Option 3</a></p>
                            <p class='reports i1'>
                                <a href='/Next.Whs.Web.MenuSystem/Default.aspx?id=461' title=''>Option 4</a></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class='systemHeader'>
                <h2><span>Robs shop</span></h2>
                <div class='subSystems'>
                    <div class='subSystemHeader'>
                        <h3><span>&nbsp;Gifts</span></h3>
                        <div class='reports '>
                            <p class='reports i1'>
                                <a href='/Next.Whs.Web.MenuSystem/Default.aspx?id=480' title=''>Option 5</a></p>
                            <p class='reports i1'>
                                <a href='/Next.Whs.Web.MenuSystem/Default.aspx?id=481' title=''>Option 6</a></p>
                        </div>
                    </div>
                    <div class='subSystemHeader'>
                        <h3><span>&nbsp;Directory</span></h3>
                        <div class='reports hidden'>
                            <p class='reports i1'>
                                <a href='/Next.Whs.Web.MenuSystem/Default.aspx?id=486' title=''>Option 7</a></p>
                            <p class='reports i1'>
                                <a href='/Next.Whs.Web.MenuSystem/Default.aspx?id=481' title=''>Option 8</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </li>
</div>


            <script>
                jQuery(document).ready(
                function()
                {
                    jQuery('div.systemHeader').click(
                    function()
                    {
                        jQuery(this).find('div:first').slideToggle();
                    });
                },
                function()
                {
                    jQuery('div.subSystemHeader').click(
                    function()
                    {
                        jQuery(this).find('div:first').slideToggle();
                    });
                });
            </script>

Answer 1

find() will look for all children in all levels; you can either use children() instead or use the below example:

$("div.subSystemHeader, div.subSystemHeader").click(function() {
   $("> div", this).slideToggle(...);
   return false;
});

I hope this help!