Reputation: 2566

How to display only clicked element in HTML using JQUERY

I have a below html tags which is feeding the data from database and display as table in html

 <html>
  <body>
   <div>
    <button type="button" class="button">DATA_1</button>
     <table class="data_table">
      <tr>
      <th>XXX</th>
      </tr>
      <tr>
      <td>YYY</td>
      </tr>
    </table>
   <button type="button" class="button">DATA_2</button>
    <table class="data_table">
      <tr>
      <th>XXX</th>
      </tr>
      <tr>
      <td>YYY</td>
      </tr>
    </table>
   <button type="button" class="button">DATA_3</button>
    <table class="data_table">
      <tr>
      <th>XXX</th>
      </tr>
      <tr>
      <td>YYY</td>
      </tr>
     </table> 
    </div>
   </body>
 </html>

I have the below script which is going to hide all table by default

  $(document).ready(function(){
     $('.data_table').hide();
  });

Also the button and table were generated automatically, and its completely dynamic page. I don't have any control to limit the data. The table gonna increase as per the input data that feed from db. Now I would like to show only specific records as per user click. If the user click DATA_1 button It should show the respective table and other should be hide.

I tried below script to show the respective data which is not working as expected:

   $(document).ready(function(){
      $('.button').on('click', function(){
      $('.data_table').show();
     });
   });

The above code expand all the table instead of showing/hiding its immediate child table or first matching child table.

Also, I would like to do the same (Clicking DATA_1 button will show the immediate class(data_table)and other will be hide) with below html tags:

  <html>
      <body>
        <div id="tab">
          <div>
            <button type="button" class="button">DATA_1</button>
          </div>
          <div class="logtitude">
             <table class="data_table">
             <tr>
             <th>XXX</th>
             </tr>
             <tr>
             <td>YYY</td>
             </tr>
             </table>
           </div>
          <div>
            <button type="button" class="button">DATA_2</button>
          </div>
          <div class="logtitude">
             <table class="data_table">
             <tr>
             <th>AAA</th>
             </tr>
             <tr>
             <td>YYY</td>
             </tr>
             </table>
          </div>
          <div>
            <button type="button" class="button">DATA_3</button>
          </div>
          <div class="logtitude">
             <table class="data_table">
             <tr>
             <th>BBB</th>
             </tr>
             <tr>
             <td>YYY</td>
             </tr>
             </table>
          </div>
        </div>
       </body>
     </html>

Can somebody help me to achieve this? I would like to showcase/hide only the immediate child table or first matching child table when I try to click the button.

Upvotes: 1

Answers (3)

Milan Chheda

Reputation: 8249

You need to use $(this).next(). If you use $('.data_table'), it will show() all tables having that as a class. Hence, you need to use $(this).next()

$(document).ready(function() {
  $('.data_table').hide();
  $('.button').on('click', function() {
    if ($(this).parent().next().find('table.data_table').is(":visible")) {
      $(this).parent().next().find('table.data_table').hide();
    } else {
      $('.data_table').hide();
      $(this).parent().next().find('table.data_table').show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="tab">
  <div>
    <button type="button" class="button">DATA_1</button>
  </div>
  <div class="logtitude">
    <table class="data_table">
      <tr>
        <th>XXX</th>
      </tr>
      <tr>
        <td>YYY</td>
      </tr>
    </table>
  </div>
  <div>
    <button type="button" class="button">DATA_1</button>
  </div>
  <div class="logtitude">
    <table class="data_table">
      <tr>
        <th>AAA</th>
      </tr>
      <tr>
        <td>YYY</td>
      </tr>
    </table>
  </div>
  <div>
    <button type="button" class="button">DATA_1</button>
  </div>
  <div class="logtitude">
    <table class="data_table">
      <tr>
        <th>BBB</th>
      </tr>
      <tr>
        <td>YYY</td>
      </tr>
    </table>
  </div>
</div>

Upvotes: 4

zuluk

Reputation: 1577

You have to hide all tables first: $('.data_table').hide(); and you have to do it again after each button click.

Make the table next to the clicked button visible: $(this).next('.data_table').show();

$(document).ready(function(){
  /* hide all tables initially */
  $('.data_table').hide();
  $('.button').on('click', function(){
    /*on click hide all tables again */
    $('.data_table').hide();
    /* show table next to the clicked button */
    $(this).next('.data_table').show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
   <div>
    <button type="button" class="button">DATA_1</button>
     <table class="data_table">
      <tr>
      <th>XXX</th>
      </tr>
      <tr>
      <td>YYY</td>
      </tr>
    </table>
   <button type="button" class="button">DATA_2</button>
    <table class="data_table">
      <tr>
      <th>XXX</th>
      </tr>
      <tr>
      <td>YYY</td>
      </tr>
    </table>
   <button type="button" class="button">DATA_3</button>
    <table class="data_table">
      <tr>
      <th>XXX</th>
      </tr>
      <tr>
      <td>YYY</td>
      </tr>
     </table> 
    </div>
   </body>
 </html>

Upvotes: 2

JKong

Reputation: 264

you should write like this:

$('.button').on('click', function(){
    $(this).next().show().siblings('.data_table').hide();
});

Upvotes: 3

How to display only clicked element in HTML using JQUERY

Answers (3)

Related Questions