CODEWITHSUNDEEP
javascriptjqueryhtml-tabledrupal-7
Martin
Martin

Reputation: 1243

Show/Hide all tr-s inside table

Here is the html structure

<table class="views-table cols-3">
      <caption>
         <h2>LINK(which will hide/show all trs in this table)</h2>
      </caption>
   <thead>
   <tbody>
   ...
   </tbody>
</table>

This table is repeated n times with the same class. Please help with a js or jquery script that hide/shows all tr-s or the whole <tbody> in the table where the link was clicked.

Upvotes: 0

Views: 366

Answers (3)

Philippe Boissonneault
Philippe Boissonneault

Reputation: 3949

In jQuery:

(jQuery.noConflict())(function($){
    $('.views-table cols-3 h2').click(function(){
        if($(this).parent('.views-table').find('TBODY > TR')[0].is(':visible')) {
            $(this).parent('.views-table').find('TBODY > TR').hide();
        } else {
            $(this).parent('.views-table').find('TBODY > TR').show();
        }
    });
});

Upvotes: 0

user626963
user626963

Reputation: 

 $('.views-table h2').click(function() {
      $(this).closest('table').find('tbody').toggle();
 });

Upvotes: 3

kannanrbk
kannanrbk

Reputation: 7134

$(".views-table h2").click(function(){
       var table = $(this).parents("table");
       var tbody = table.children("tbody");
       if(tbody.is(':visible')){
               tbody.hide();
       }else{
           tbody.show();
       }

});

Try this link http://jsfiddle.net/wFcpP/8/

Upvotes: 2

Related Questions