how to reverse back effect of onclick

Question

$(document).ready(function() {
  var div = $(".searchbox");
  div.click(function() {
    $(".headerlinks").css("display", "none");
    div.css("display", "none");
    $(".inp").css("display", "inline-block");
    $(".inp").fadeIn("slow");
  });
});

this is the function i have written to display a search box that is a input field on click of .searchbox class but i want to get back the .searchbox class if user clicks again anywhere outside the .inp class. can anyone help please..?