CODEWITHSUNDEEP
jquery
webwrks
webwrks

Reputation: 11918

Column Click Issue

I have two columns...the right column I want to open up and show the contents when either it's header is clicked, or it's corresponding value in the left column is clicked...and toggle off when another value is clicked. Thanks for the help.

<table>
    <tr>
       <th>1</th>
       <td>
           <div class="showMeOnClick">stuff</div>
       </td>
    </tr>
    <tr>
       <th>2</th>
       <td>
           <div class="showMeOnClick">different stuff</div>
       </td>
    </tr>
    <tr>
       <th>3</th>
       <td>
           <div id="showMeOnClick">stuff</div>
       </td>
    </tr>
</table>

$('th').each(function() {
    $(this).click(function() {
        $(this).find('td').toggle();
    });
});

Upvotes: 1

Views: 44

Answers (1)

mreq
mreq

Reputation: 6542

$('th').click(function(){
  $('.showMeOnClick').hide(); // hide everything
  $(this).siblings('td').find('.showMeOnClick').show(); // show div in the same row
});

if you want to capture if the div is allready visible (not hide it and show again, use a class)

$('th').click(function(){
    if ($(this).is('.active') == false) {
      $('th').removeClass('active');
      $('.showMeOnClick').hide(); // hide everything
      $(this).addClass('active').siblings('td').find('.showMeOnClick').show(); // show div in the same row
    }
});

Upvotes: 2

Related Questions