Question

At runtime I have a loop that creates a number of divs with the same class depending on the number in the database.

<div class="show">....</div> 
<div class="show">....</div>  
<div class="show">....</div>  

I want to display this div using the slideToggle() function with jQuery. For each of these I have a separate hyperlink which when clicked should display the div. Also there are a number of tags in between the hyperlink and the div that I want to toggle.

<div>
<div>
<a href="#" class="display">View</a>  

</div>
    <br />
    </div>
    <div>
        <div class="clear"></div>
      </div>


<div class="show">....</div>

<div>
<div>    
<a href="#" class="display">View</a>  
</div>
    <br />
    </div>
    <div>
        <div class="clear"></div>
      </div>



<div class="show">....</div> 

<div>
<div>
<a href="#" class="display">View</a>  

</div>
    <br />
    </div>
    <div>
        <div class="clear"></div>
      </div>


<div class="show">....</div>   

$(function () {    
     $(".display").click(function(){    
         $(".show").slideToggle();    
         return false;     
      });  
});

Naturally when this is called each div layer is toggled, regardless of which hyperlink is clicked. I want to just toggle the div closest to the given hyperlink.

Thanks in advance.

Answer 1

Find the <div> relatively by going from this using tree traversal functions, like this:

$(function () {
  $(".display").click(function () {
    $(this).next().slideToggle();
    return false;
  });
});

In this case since it’s the next sibling element we care about, use .next(), if the structure is different from the question, you’ll need to adjust it accordingly, go get from the <a> you clicked on (this) to the <div> you want to toggle.