title: Using slideToggle() for closest or next div
body: <p>Okay, redoing the question to a much simpler one.</p>
  
  <p>Here's my HTML code.</p>
  
  <pre><code>&lt;p&gt;
  &lt;span id="tripTitle"&gt;Trip #1&lt;/span&gt;&amp;nbsp;
      &lt;span class="expandicon" style="display:none;"&gt;
          &lt;span class="flip"&gt;
          &lt;img class="expand" src="img/expand1.png" /&gt;
          &lt;/span&gt;
      &lt;/span&gt;
      &lt;span class="shrinkicon"&gt;
          &lt;span class="flip"&gt;
          &lt;img class="shrink" src="img/shrink1.png" /&gt;
          &lt;/span&gt;
      &lt;/span&gt;
  &lt;/p&gt;
  &lt;div class="panel"&gt;&lt;table id="table" width="100%"&gt;
  some text here.
  &lt;/div&gt;
  </code></pre>
  
  <p>and here's the Java:</p>
  
  <pre><code>$(document).ready(function(){
  $(".flip").click(function(){
      $(".panel").slideToggle("slow");
    });
  </code></pre>
  
  <p>The HTML will repeat 10 times in a single page or for every Trip created. The javascript code will toggle all div's with the class "panel". Question is: Is there a way so the only div that toggles is the one closest or next to the image with the class "flip" clicked?</p>
  
  <p>By the way, here's a jsfiddle of it. <a href="http://jsfiddle.net/LyUnB/" rel="nofollow">http://jsfiddle.net/LyUnB/</a></p>