Onclick - показать одну таблицу, а остальные скрыть

Question

На моей странице есть несколько таблиц всех одинаковых форматов с различным содержанием. Они все скрыты по умолчанию. Когда я нажимаю кнопку, я хочу, чтобы таблица, за которой сразу следовала за этой кнопкой, отображалась, а остальные оставались скрытыми. Прямо сейчас все таблицы показывают, когда я нажимаю одну кнопку. Как я могу это исправить? (Примечание: таблицы представляют собой упрощенные версии для экономии места)

HTML:

<div>
<button class="showMoreBtn">Restaurant Details</button>
     <div class="showMoreTable">
         <table class="blogpostTable">
               <caption>DoughTO</caption>
                    <tr>
                       <td class="heading">Address</td>
                    </tr>
                     <tr>
                       <td class="heading">Website</td>
                     </tr>
                      <tr>
                        <td class="heading">Rating</td>
                     </tr>
          </table>
      </div>
</div>

<div>
<button class="showMoreBtn">Restaurant Details</button>
     <div class="showMoreTable">
         <table class="blogpostTable">
               <caption>Konjiki</caption>
                    <tr>
                       <td class="heading">Address</td>
                    </tr>
                     <tr>
                       <td class="heading">Website</td>
                     </tr>
                      <tr>
                        <td class="heading">Rating</td>
                     </tr>
          </table>
      </div>
</div>

Javascript:

$('.showMoreTable .blogpostTable').hide();

var $child = $(this).find('.showMoreTable .blogpostTable');

$('.showMoreBtn').on("click",function(){
    if ($child.is(":hidden")){
        $child.show();
    };
})

Answer 1

В событии клика

1. Скрыть все таблицы

2. показать таблицу рядом с кнопкой

Это может быть достигнуто аналогично приведенному ниже фрагменту кода

$('.showMoreBtn').on("click",function(){
    $('.blogpostTable').hide();
    $(this).next().show();
})

Answer 2

Попробуйте это, изменив JavaScript: -

$('.showMoreTable').hide();

$('.showMoreBtn').on("click",function(){
   $(this).next().show();
})

Answer 3

Просто вы могли бы сделать что-то ниже

$('.showMoreTable').hide();

var $child = $(this).find('.showMoreTable .blogpostTable');

$('.showMoreBtn').on("click",function(){

    $('.showMoreTable').hide();
    $(this).siblings('.showMoreTable').show();
    
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button class="showMoreBtn">Restaurant Details</button>
     <div class="showMoreTable">
         <table class="blogpostTable">
               <caption>DoughTO</caption>
                    <tr>
                       <td class="heading">Address</td>
                    </tr>
                     <tr>
                       <td class="heading">Website</td>
                     </tr>
                      <tr>
                        <td class="heading">Rating</td>
                     </tr>
          </table>
      </div>
</div>

<div>
<button class="showMoreBtn">Restaurant Details</button>
     <div class="showMoreTable">
         <table class="blogpostTable">
               <caption>Konjiki</caption>
                    <tr>
                       <td class="heading">Address</td>
                    </tr>
                     <tr>
                       <td class="heading">Website</td>
                     </tr>
                      <tr>
                        <td class="heading">Rating</td>
                     </tr>
          </table>
      </div>
</div>