jquery parameters

Question

I have a little problem, here, I'm reading data from a database, adding it to a table to be displayed on a webpage. The table in which this data is added lies inside a panel. To view this table, I would then use this javascript to expand the panel:

<script type="text/javascript">
 $(document).ready(function(){
  $(".flip").click(function(){
   $(".panel").slideToggle("slow");
  });
 });
</script>

To see where the class names flip and panel comes from see below:

<div class="panel">
    <table>
      ...
    </table>
</div>

<p class="flip" onmouseover="this.style.color='red';this.style.cursor='hand'" onmouseout="this.style.color='black';this.style.cursor='pointer'"> VIEW TABLE </p>

Now, since I'm reading data from the database iteratively, the number of item in there could be anything, what I wish to know is, how do I do this such that each has it's own identity, that when I click on "VIEW TABLE" then each responds on its own. At the moment when I click on one, all expand and vice-versa, obviously because the share a common class name. I've tried to make sure that the class name be the entry id, but certain things break.

Answer 1

add to the element you want to fire the click event and send a refrence to it for example

the div will have on click event will look like this

<div onclick="MyFunction(this);"> </div>

in the function body recieve the object then reach to the element you want

function MyFunction(sender)
{
  $(sender).//now you have the element and could reach to the parent or the child as you want 
}

Answer 2

Making this assumption: You saying you have a new <div... for each new <p... and that the mouse over (or click) of the <p> should show the cooresponding <div>.

Try using this: for cooresponding instances.

$('.flip').click(function()
{
   $('.panel').eq($(this).index()).slideToggle("slow"); 
}); 

Answer 3

Use .prev() for your layout:

<script type="text/javascript">
 $(function() {
  $(".flip").live("click", function(){
   $(this).prev(".panel").slideToggle("slow");
  });
 });
</script>

This will select the previous class="panel" to the class="flip" you clicked and slideToggle it. Also, since you may have any number of these handlers that will be the same, I suggest you use .live() like my example above, using 1 event handler instead of n event handlers.

Answer 4

Can you assign a new id for each 'panel' based on something in the db, or just with a sequential number? If so, then you could try this:

<div class="panel" id="panel_1"> 
  <table> 
    ... 
  </table> 
</div> 

<p class="flip" onClick="$(".panel_1").slideToggle("slow");    " ... >

<div class="panel" id="panel_2"> 
</div> 

<p class="flip" onClick="$(".panel_2").slideToggle("slow");    " ... >

etc.