click to show link, click anywhere else to hide

Question

I have some links which I would like to toggle to show and hide. This works fine, however when I click on another link to show, I want the current open link to hide.

Here is my current code..

$(function () {
  $(".byr").click(function () {
    $(".popup").hide();
    $(this).find(".popup").show();
  });
});

As you can see on click, I hide the popup. Then when I click on another link, the new link shows. But I would like it so if you then click on the popup (or anywhere else on the page), the current popup would hide.

Not sure how I would go about doing this. Here is a codepen... http://codepen.io/anon/pen/wtkmL

Answer 1

bind the click event on document to hide the popup. you will also need to stopPropagation on .byr click event to prevent document click from hiding popup:

$(function () {
  $(".byr").click(function (e) {
   $(".popup").hide();
   $(this).find(".popup").show();
    e.stopPropagation();
  });
  $(document).click(function (e) {
    $(".popup").hide();
  });
});

Working Demo