Toggle 1 div on each click and close the previously opened div on another click

http://stackoverflow.com/questions/37161914/toggle-1-div-on-each-click-and-close-the-previously-opened-div-on-another-click/37162118#37162118

by fido3993

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row mt-30">
  

   <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
      <a href="javascript:void(0)" class="click-box-open">
        <div class="team-container">
          <img src="images/product.jpg" alt="" class="img-responsive center-block" />
        </div>
        <h4 class="text-center text-black">MITCHELL KAPPOS</h4>
        <h5 class="text-center text-black">Designer</h5>
        <h6 class="text-center text-black">Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.</h6>
      </a>
      </div>
      
  
 
  
    
    

    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
      <a href="javascript:void(0)" class="click-box-open">
        <div class="team-container">
          <img src="images/product1.jpg" alt="" class="img-responsive center-block" />
        </div>
        <h4 class="text-center text-black">LEONARDO DA VINCI</h4>
        <h5 class="text-center text-black">Artist</h5>
        <h6 class="text-center text-black">Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.</h6>
      </a>
      </div>

      <div class="click-box mt-30">
        <a href="javascript:void(0)" class="click-close-btn">
          <i class="fa fa-times fa-lg text-white pull-right mr-30" aria-hidden="true"></i>
        </a>
        <div class="container">
          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <h4 class="text-center">LEONARDO DA VINCI</h4>
              <h5 class="text-center">Artist</h5>
              <h6 class="text-center">
									Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga. Similique sunt culpa qui officia deserunt mollitia animi dolorum fuga.Similique sunt culpa qui officia deserunt mollitia animi...

CSS

.click-box {
    background: #00c6d7;
     width: 100% !important;
     color: #fff;
     font-family: open sans;
     height: auto;
     padding: 15px 0 15px 0;
     letter-spacing: 1px;
     display: none;
     position: absolute;
     left: 0;
     right: 0;
     z-index:-9999999;
}

JavaScript

/* $(document).ready(function() {
  $(".click-box-open").click(function() {
    var test = $(this).parent().next(".click-box");
    test.slideToggle();
    $(".click-box").not(test).slideUp();
  });
}); */


function handler( event ) {
  var target = $( event.target );
  if ( target.is( ".click-box" ) ) {
    target.children().toggle();
  }
}
$( ".click-box-open" ).click( handler ).find( ".click-box" ).hide();