Как показать / скрыть различное содержимое таблицы в зависимости от области карты, нажмите

Question

Я пытаюсь отобразить таблицу с другим содержимым в зависимости от области, по которой вы щелкнули.

Например, если я нажимаю на A (область карты), я хочу видеть только информацию о A. И если я нажимаю на B (область карты), я хочу видеть только информацию о B.

<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" />
</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 class="hide section-1" style="margin-left: auto; margin-right: auto;">
  <tbody>
    <tr>
      <th>
        <strong>Name&nbsp;</strong>
      </th>
      <th>
        <strong>&nbsp;Surname</strong>
      </th>
      <th>
        <strong>Addressf&nbsp;</strong>
      </th>
      <th>
        <strong>Postecode</strong>&nbsp;
      </th>
    </tr>
    <tr>
      <td>test&nbsp;</td>
      <td>test&nbsp;</td>
      <td>test&nbsp;</td>
      <td>test&nbsp;</td>
    </tr>
  </tbody>
</table>

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

Вот скрипка https://jsfiddle.net/or17ny60/

Answer 1

Я надеюсь, что это то, что вы хотели

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