UI toggle expanding/hiding nested divs

by Akram kamal

HTML

<div class="DeptWrapper">Departments
<div class="lvl1">Administration
<div class="lvl2">Accounting Division
</div>
<div class="lvl2">Administration Services
</div>
<div class="lvl2">Budget Division
</div>
<div class="lvl2">Collections Division
</div>
<div class="lvl2">Human Resources Division
</div>
<div class="lvl2">Information Technology Division
</div>
<div class="lvl2">Purchasing Division
</div>
<div class="lvl2">Records Management Division
<div class="lvl3">Imaging
</div>
<div class="lvl3">Record Transmittals
</div>
<div class="lvl3">RM Mail Division
</div>
</div>
<div class="lvl2">Risk Management Division
</div>
<div class="lvl2">Tax Listing
</div>
</div>
<div class="lvl1">Circuit Court
<div class="lvl2">Civil Court
</div>
<div class="lvl2">Clerk of Circuit Court
</div>
<div class="lvl2">Court Officials
</div>
<div class="lvl2">Criminal ＆ Traffic Court
</div>
<div class="lvl2">Family Court
</div>
<div class="lvl2">Jury Services
</div>
<div class="lvl2">Juvenile Court
</div>
<div class="lvl2">Probate Court
</div>
</div>
</div>

CSS

.lvl1, .lvl2, .lvl3{
    margin-left:20px;
}

JavaScript

$(function(){
    $('div').on('click', function(e){
        e.stopPropagation();
        $(this).children().toggle();
    });
});