jQuery: if click again, hide.

Question

Right now you click on a link, it send ajax call and on success it prepends the output in . Not i would like to, if you click on the link while its open then it should close/hide the output.

function MoreFriendOptions(friend){
$.ajax({ 
       type: "POST",
       url: "misc/GetMoreFriend.php",
    data: {
    mode: 'ajax',
    friend : friend
    },
       success: function(msg){
      $('#MoreFriendInfo'+friend).prepend(msg);

        }
     });
}

echo "<div id='MoreFriendInfo".$showInfo['bID']."'></div>";
   <div style="float: right;">
  <a href="javascript:void(0);" onclick="MoreFriendOptions(<?=$showInfo["bID"];?>)">mer</a>
   </div>

Answer 1

you need the toggle method.

$('a.mylink').toggle(function() {
  //do your ajax stuff here
}, function() {
  //do your close and hide here
});

Answer 2

If you have a setup something like

<div class=friends">
    <div class="friend1">John Doe</div>
    <div class="friend2">Jane Doe</div>
</div>

then if you save the index for positioning, you could remove/hide elements you've added.