如何基于地图区域单击显示/隐藏不同的表内容

$(function() {
  $('.list-group area').on('click', function(e) {
    e.preventDefault();
    $('.hide').hide();
    $('.' + this.id).show();
  });
});

.list-group {
  min-height: 300px;
  min-width: 300px;
  display: block;
  position: relative;
}

.list-group area {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
}

.list-group #section-1 {
  left: 0;
  background: #0F0;
}

.list-group #section-2 {
  left: 50%;
  background: #00F;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<map class="list-group" name="map">
  <area id="section-1" class="list-group-item" shape="rect" coords="198,368,142,337" href="#section-1" />
  <area id="section-2" class="list-group-item" shape="rect" coords="198,368,142,337" href="#section-2" />
</map>

<!-- <img alt="Picture1" src="http://via.placeholder.com/680x466/444444/DDDDDD?text=Placeholder" width="680" height="466" usemap="map" data-cms="{'contentId':95875}" /> -->

<table style="margin-left: auto; margin-right: auto;">
  <tbody>
    <tr>
      <th>
        <strong>Name&nbsp;</strong>
      </th>
      <th>
        <strong>Surname&nbsp;</strong>
      </th>
      <th>
        <strong>Addressf&nbsp;</strong>
      </th>
      <th>
        <strong>Postecode&nbsp;</strong>
      </th>
    </tr>
    <tr class="hide section-1">
      <td>test a</td>
      <td>test a</td>
      <td>test a</td>
      <td>test a</td>
    </tr>
    <tr class="hide section-2">
      <td>test b</td>
      <td>test b</td>
      <td>test b</td>
      <td>test b</td>
    </tr>
  </tbody>
</table>