隐藏/显示jquery仅适用于1 div

Question

我正在创建一个包含4个不同部分的页面。在每个部分中有2个按钮隐藏/显示2个不同的div。现在它只适用于顶部d​​iv，当你点击其他3个div中的按钮时，它们会打开顶部div。内容正在从wordpress帖子中提取。这是我正在使用的JavaScript。

        $(document).ready(function() {
      $('.expander').on('click', function() {
    if ($('#TableData').is(":visible")) {
      $('#TableData').hide();
    } else {
      $('#TableData').show();
    }
    $('#TableData2').hide();
    return false;
      });

      $('.expander2').on('click', function() {
    if ($('#TableData2').is(":visible")) {
      $('#TableData2').hide();
    } else {
      $('#TableData2').show();
    }
    $('#TableData').hide();
    return false;
      });
    });

这是html：

                <div class="popup-open">
                    <div class="icons-large"></div>
                    <div class="icons-large"></div>
                    <div class="title">Title</div>
            <a href="#" rel="bookmark" title="" class="expander show_hide">WHAT'S IN THE BAG</a></br>
            <a href="" rel="bookmark" title="" class="expander2 show_hide2">PLAYER HISTORY</a>


                    </div>
                    </div>  


            <div id="TableData">
            <div class="slidingDiv">
                  <div id="tabs-1">
                                    <div class="witb-tab">


                                            <div class="row">
                                                <a target="_blank" href="#">
                                                    <div class="image">
                                                        <img src="#" alt="">
                                                        <a target="_blank" class="product-name" href="" title=">">

                                                </a>
                                                    </div>
                                                </a>
                                            </div>



                                    </div>
                                    <a href="#" class="expander show_hide" style="float:right;">CLOSE</a>
                            </div>


                  </div>
            </div>
                <div id="TableData2">
                <div class="slidingDiv2">
                   <div class="column left">

                            <!-- post thumbnail -->

                            <!-- /post thumbnail -->

                            <div class="player-biography">

                            </div>
                        </div>
                        <div class="column right">
                  <div id="tabs-2">
                                    <div class="content-wrap"></div>
                                </div>
                             <a href="#" class="expander2 show_hide2" style="float:right;">CLOSE</a>    
                  </div>
                  </div>
                  </div>