I have a recursive function that renders divs as shown below. I have
been researching and have not found a good way to accomplish the toggle
method. I would like to be able to have the click method fire on only a
single element. IE: Only fire when i click on Administration, not when
i click on anything within administration. Then at this point all i am
really trying to do is click on a level 1, fire the toggle method to
just show/hide whats nested inside that element. I would love to be
able to do the same for .lvl2, and lvl3
Any ideas on the proper selector for click and the proper way to
only select immediate (first level nested) elements, but not their
children would be great. Thanks! PS, willing to change how my HTML
is rendered if it can accomplish this easier.
- <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>
-