Search code examples
jqueryhtmlslidetoggle

Using slideToggle() for closest or next div

Okay, redoing the question to a much simpler one.

Here's my HTML code.

<p>
<span id="tripTitle">Trip #1</span>&nbsp;
    <span class="expandicon" style="display:none;">
        <span class="flip">
        <img class="expand" src="img/expand1.png" />
        </span>
    </span>
    <span class="shrinkicon">
        <span class="flip">
        <img class="shrink" src="img/shrink1.png" />
        </span>
    </span>
</p>
<div class="panel"><table id="table" width="100%">
some text here.
</div>

and here's the Java:

$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });

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?

By the way, here's a jsfiddle of it. http://jsfiddle.net/LyUnB/

Solution

  • Use

    $(this).parent().nextAll(".panel:eq(0)").slideToggle("slow");

    .panel is a sibling of the parentNode of .flip