Using Jquery slideToggle on large list of individual items

StackOverflow https://stackoverflow.com/questions/3081813

  •  28-09-2019
  •  | 
  •  

Question

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>
Was it helpful?

Solution

You can change your selector inside the .click() handler to use this and find the <ul> relatively, like this:

$(function(){
  $("ul[id|=Nested]").hide();

  $("a[id|=trigger_Nested]").click(function() {
    $(this).siblings("ul").slideToggle("fast");
    return false;
  });
});

You can view a quick demo here, this goes from the element you clicked (then <a>) and finds it's .siblings() that match the selector (the <ul> in this case), and slideToggle's only that one.

OTHER TIPS

How about two level indented list ??

<ul id="TopLevel-List">
<li><a href=# id="trigger_Nested-0">Top Level 1</a>
<ul id='Nested-0' >
  <li><a href=# id='trigger_Nested-1'>Top Level 2</a>
      <ul id-'Nested-1'>
          <li><a href='#'>Item 1</a></li>
          <li><a href='#'>Item 2</a></li>
          <li><a href='#'>Item 3</a></li>
      </ul>
      <ul id-'Nested-1'>
          <li><a href='#'>Item 1</a></li>
          <li><a href='#'>Item 2</a></li>
          <li><a href='#'>Item 3</a></li>
      </ul>
  </li>  
</ul>
</li>
<li><a href=# id='trigger_Nested-1'>Top Level 2</a>
<ul id='Nested-0' >
  <li><a href=# id='trigger_Nested-1'>Top Level 2</a>
      <ul id-'Nested-1'>
          <li><a href='#'>Item 1</a></li>
          <li><a href='#'>Item 2</a></li>
          <li><a href='#'>Item 3</a></li>
      </ul>
      <ul id-'Nested-1'>
          <li><a href='#'>Item 1</a></li>
          <li><a href='#'>Item 2</a></li>
          <li><a href='#'>Item 3</a></li>
      </ul>
  </li>  
</ul>
</li>
</ul>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top