Onclick - show one table and keep the rest hidden

Question

On my page, I have multiple tables, all of similar formats with different contents. They're all hidden by default. When I click a button, I want the table that immediately follows that button to show and the rest to stay hidden. Right now, all of the tables show when I click one button. How can I fix this? (Note: tables are simplified versions for the sake of space)

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

Simply you could do something below

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

Answer 2

In click event

1. Hide all tables

2. show the table next to button

This can be achieved similar to below piece of code

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

Answer 3

Try this one by changing JavaScript:-

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

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