What's happening is that $("#more")
selects every div with ID more, and changes it
Give each .less
and .more
something which is unique to the current user:
<div class="less" data-id="<?php echo $person_id; ?>">Show less</div>
<div class="more" data-id="<?php echo $person_id; ?>">Show more</div>
Then in your #more
, where the actual data is, do something about the same
<div id="more-<?php echo $person_id; ?>">More information here</div>
Now in your jQuery, select the correct id:
$(".less").click(function(){
$("#more-"+ $(this).attr('data-id')).slideUp(1000);
});
$(".more").click(function(){
$("#more-"+ $(this).attr('data-id')).slideDown(1000);
});
What you are effictively doing now is telling jQuery to select div with e.g. id="more-15"
in case you clicked on the .more
with attribute data-id="15"
, thus selecting the correct div :)
Note: You don't have to use divs to be able to do this. This would also solve invalid HTML because you got tons of elements with the same id's