How to close something when you click on something else?

I am trying to make a fun website for my friends and family, and one aspect of it is to click on a button, and their bio shows up. What I want is where you click on a different bio, and the previous one disappears. How can I do this?

jQuery:

$(document).ready(function(){
  $('.page-body2').hide();
  $('.page-body3').hide();
  $('.family-photo1').on('click', function(){
    $('.page-body2').toggle();
  });
  $('.family-photo2').on('click', function(){
    $('.page-body3').toggle();
  });
  ***CODE HERE?***
});

HTML:

<div class="page-body2">
      <div class="bren"><b>Brendon:</b></div>
      <p>**BIO**</p>
    </div><div class="page-body3">
      <div class="heath"><b>Heather:</b></div>
      <p>**BIO**</p>
    </div>