Multiple jQuery toggle links

Question

I've managed to create multiple toggle instances on my page, however the toggle links themselves need to be unique, as at the moment toggling one link toggles all the rest.

Here is my code so far:

jQuery:

$(document).ready(function() {
  $('.toggle').click(function() { 
   var id = $(this).attr('name');
   $('#module' + id).slideToggle('fast');
   $('.toggle').toggle();
   return false; 
  });
});

HTML:

<a class="toggle" name="1" href="#">- Hide</a> 
<a class="toggle hidden" name="1" href="#">+ Show</a>

<div id="module1">Toggled Content</div>

As you can see, the issue is "$('.toggle').toggle();" as it's not unique to each toggle. So toggling one link closed, closes all the others, and the same when opening. Any ideas?

Answer 1

To toggle the element that was clicked, call $(this).toggle().

Answer 2

To toggle both links:

$('[name=' + id + ']').toggle();

Answer 3

$(document).ready(function() {
  $('.toggle').click(function() { 
   var id = $(this).attr('name');
   $('#module' + id).slideToggle('fast');
   $('a.toggle[name='+id+']').toggle();
   return false; 
  });
});

Seems to be what you need