need to refactor multiple toggle lists $(document).ready(function() {

  $('#state-list, #major-list').hide();

  $('#state').bind('click', function() {
    $('#state-list').toggle();
  });

  $('#major').bind('click', function() {
    $('#major-list').toggle();
  });

});


All links and lists will follow the naming convention of:

link, link-list, like seen below:

&lt;a href="#" id="link"&gt;Link&lt;/a&gt;

&lt;div id="link-list"&gt;
...
&lt;/div&gt;


Is there a way listen for all links and toggle their respective lists, instead of creating a bind click for every link?
&lt;a href="#" id="link" class="linksToWatch"&gt;Link&lt;/a&gt;
 &lt;div id="link-list" class="listsToToggle"&gt;

 $('.listsToToggle').hide();

 $('.linksToWatch').bind('click', function() {
   var id = $(this).attr('id');
   $('#' + id + '-list').toggle();
 });


May be, something like this?