Display none when the button is click again in Ajax - ajax

Question

I have been using Ajax to show partial pages in my application.
I would like to ask if it's possible to set the display to none when the user click again the link generated by #Ajax.ActionLink()?
Here's my code:
#model IEnumerable<RMSystem.Models.rms_referred_vw>
<table id="example">
<tbody>
#foreach(var rfp in Model){
<tr>
<td>
#Ajax.ActionLink(Convert.ToString(rfp.rf_id), "Edit_Ref", new { rf_id = rfp.rf_id },
new AjaxOptions
{
HttpMethod = "POST",
InsertionMode = InsertionMode.InsertBefore,
UpdateTargetId = "target6",
}, new {#style="color:darkblue", title = "Edit Referred Person"})
</td>
<td>#Html.DisplayFor(model => rfp.rf_badgeno)</td>
// more table cells
<td>
#Ajax.ActionLink("Details", "Details", new { rf_id = rfp.rf_id },
new AjaxOptions
{
HttpMethod = "GET",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "show",
}, new {#style="color:darkblue", title = "Show More Details"})
</td>
</tr>
}
</tbody>
</table>
<div id="target6"></div>
<div id="show" style="width:250px;height:200px;margin-left:1000px;"></div>
That's my code Sir.
Controller:
public ActionResult Details(int rf_id = 0)
{
var check = db.rms_approval_route_vw.Where(s => s.rf_id == rf_id).FirstOrDefault();
try
{
if (check != null)
{
return PartialView(check);
}
}
catch (Exception) {
throw;
}
return Content("<script type='text/javascript'>alert('Waiting for regularization.');</script>");
}

Answer 1

Remove your #Html.ActionLink() and replace with (note the code below is for the 2nd link)
<td>Details<td>
and add a script
var details = $('#show');
$('.details').click(function() {
var self = $(this);
// Check if we have already loaded it
if (self.data('loaded'))
{
details.empty(); // clear contents
self.removeData('loaded'); // signal is no longer loaded
} else {
$.get('#Url.Action("Details")', { rf_id: $(this).data('id') }, function(data) {
details.html(data); // update the DOM
self.data('loaded', true); // signal its been loaded
});
}
});