jQuery code causes all divs of a particular class to toggle when link is clicked
<p>I have some jquery code that displays and hides a div when a link is clicked.</p>

<pre><code>$(document).ready(function() {
  $(".tracklist").hide();
  $('.link').bind('click', function(e) {
    $('.tracklist').toggle('slide', {easing: 'easeOutQuint', direction: 'down'}, 1000);
    return false;
  });
});
</code></pre>

<p>This code toggles all divs named tracklist when I press any link. Not good.</p>

<p>I need to find a way of ensuring that each link affects only one tracklist div</p>

<h3>Edit</h3>

<p>My markup - the code below appears several times on each page:</p>

<pre><code>&lt;article class="podcast"&gt;
  &lt;ul class="buttons"&gt;
    &lt;li&gt;
      &lt;a class="link" href=&gt;"#"&gt;Tracklist&lt;/a&gt;
    &lt;/li&gt;
    // other links removed 
  &lt;/ul&gt;

  &lt;div class="tracklist"&gt;
    Content that I want to toggle
  &lt;/div&gt;
&lt;/article&gt;
</code></pre>
