Question

I am attempting to make a simple accordion where the user clicks on level 1 to see level 2, clicks on level two to see level three and so on. Level 1 will be duplicated many times so i am using the .children method to avoid all the levels 2’s opening when level 1 is clicked.

The problem is when level 2 is clicked it opens level 3 but also closes level 1. I could target each directly to solve this issue but i want to do it with the minimum amount of code. Any suggestions would be much appreciated.

<div class="level1">
Level 1
    <div class="level2">
    Level 2
        <div class="level3">
        Level 3
        </div>
    </div>
</div>

<script type="text/javascript">

$(document).ready(function(){
    $('.level1').click(function(){
        $(this).children('.level2').slideToggle('300');
        }); 
});
</script>

Answer 1

You can make that more generic (so you can easily add more levels later like):

<div class="level1 acc">
Level 1
    <div class="level2 acc">
    Level 2
        <div class="level3 acc">
        Level 3
        </div>
    </div>
</div>

(function($) {
    $('.acc').click(function(){
        $(this).children('div').slideToggle('300');

        return false; // this prevents event bubbling (thus preventing the behavior you have now) 
    }); 
})(jQuery);

Demo: http://jsfiddle.net/PeeHaa/7gAzx/