Hide div when other div is clicked

Question

How do I toggle so when I have one div open and I click the other one it closes? Here is my Javascript:

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

Answer 1

 $(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>