title: jquery toggle open all div on one click
body: <p>Please take a look at below codes, for whatever reason I am unable to open one div only when I click on the edit link, it opens all divs when I click the edit link.  This is what I have:</p>
  
  <pre><code>( function($) {
      $(document).ready(function() {
          // hides the slickbox as soon as the DOM is ready
          $('.slickbox').hide();           
          // toggles the slickbox on clicking the noted link  
          $('.slick-toggle').click(function() {
          $('.slickbox').toggle(400);
          return false;
          });
      });
  } ) ( jQuery );
  </code></pre>
  
  <p>Here is the HTML part:</p>
  
  <pre><code>&lt;li id="list_47"&gt;
  &lt;div&gt;
      &lt;div id="row"&gt;
          &lt;div class="title id="bannerid59"&gt;&lt;img src="banner_45_10.jpg" /&gt;&lt;/div&gt;
          &lt;div class="action"&gt;&lt;a href="#" class=".slick-toggle"&gt;Edit&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="row-right"&gt;
          &lt;span class="small"&gt;Sort Order: 2&lt;/span&gt;&lt;br&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="slickbox"&gt;blah blah box 1&lt;/div&gt;
  &lt;/li&gt;
  
  &lt;li id="list_48"&gt;
  &lt;div&gt;
      &lt;div id="row"&gt;
          &lt;div class="title id="bannerid60"&gt;&lt;img src="banner_45_11.jpg" /&gt;&lt;/div&gt;
          &lt;div class="action"&gt;&lt;a href="#" class=".slick-toggle"&gt;Edit&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="row-right"&gt;
          &lt;span class="small"&gt;Sort Order: 2&lt;/span&gt;&lt;br&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="slickbox"&gt;blah blah box 2&lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>I have looked through other examples or solutions with no luck (such as replacing $('.slickbox').toggle(400); with $(this).next(".slickbox").slideToggle(400);)</p>
  
  <p>Any pointer is greatly appreciated.  thanks.       </p>