单击其他 div 时隐藏 div

Hide div when other div is clicked

当我打开一个 div 并单击另一个关闭时,我该如何切换?这是我的 Javascript:

$(function () {
    $('.expander').live('click', function () {
        $('#TableData').slideToggle();
        return false;
    });
     $('.expander2').live('click', function () {
        $('#TableData2').slideToggle();
        return false;
    });
});

 $(document).ready(function(){
 
 $("#TableData").hide();
 $(".expander").show();
 
 $('.expander').click(function(){
 $("#TableData").slideToggle();
 return false;
 });
 
 $("#TableData2").hide();
 $(".expander2").show();
 
 $('.expander2').click(function(){
 $("#TableData2").slideToggle();
 return false;
 });
 
 });
#TableData2 {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class=expander>Expander</button>
<button class=expander2>Expander 2</button>

<hr>
<div id=TableData>TableData1</div>



<div id=TableData2>TableData2</div>