jQuery: if click again, hide

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>

you need the toggle method.

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

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.