在onclick事件上滑动隐藏的div

Question

I have the following php while loop code:

while (...($...)){
$convid = $row['ID'];

 echo"
<button onclick='getconvo($convid)'>open</button>


    <div class="convowrap"></div>
    ";


    }

and the javascript code

<script type='text/javascript'>
$(document).ready(function(){
$(".convowrap").hide(0)
})
</script>

script type='text/javascript'>
function getconvo(id){
$(".convowrap").hide(0).delay(200).slideDown(500)
var convid = id;
$('.convowrap').load('fetch_info.php', {id : convid}, function () {

       // do something when success
  });
 }
 </script>

When i click on the button above that says 'open,' all of the div that says convowrap slides, but i only want the current div to slide based on the button that was clicked that was generated from the php while loop. If the php loop executed three times, when i click on the first button generated by the first loop, the convowrap div slides on all three entries generated by the loop.

What do I do? Please help?

Thanks in advance.

Answer 1

The problem is that all the divs have the same class so its functioning as you it is supposed to ...

As you have the div after the button you can replace

 $(".convowrap")

With

$(this).next()

Inside the function for both .load and .hide (Whichever you want)

more generic

It may be more usefull to assign another class to each div like

<div class='convowrap dummyclass$convid'></div>

And on button click change the selector to match that class like

 $('dummyclass'+id)

Hope this helps