Hi All,
I have a large nested list that I am trying to animate using jquery slideToggle. I want the individual nested lists (id="Nested" + counter) to animate separately, so that a user could toggle a list to display/hide without affecting the others. The animation would be triggered by the corresponding "trigger_Nested" (+ counter) link.
However, there will end up being around 75 or so nested lists, and I don't want to have to individually list out each pair of anchor and list.
I feel like there is probably a very simple way to do this dynamically using the counter, but I am a bit of a Javascript novice so can't figure it out. The js I have below toggles all lists at the same time, which is not what I want.
Any help is appreciated, Thanks!
<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul[id|=Nested]").hide();
$("a[id|=trigger_Nested]").click(function() {
$("ul[id|=Nested]").slideToggle("fast");
return false;
});
});
</script>
</head>
<body>
<ul id='TopLevel-List'>
<li><a href=# id='trigger_Nested-0'>Top Level 1</a>
<ul id='Nested-0' >
<li><a href=#>Item 1</li>
<li><a href=#>Item 2</li>
</ul>
</li>
<li><a href=# id='trigger_Nested-1'>Top Level 2</a>
<ul id='Nested-1'>
<li><a href=#>Item 3</a></li>
<li><a href=#>Item 4</a></li>
<li><a href=#>Item 5</a></li>
</ul>
</li>
</ul>
</body>