How can I hide and show rows in my table using jQuery?

jquery

Solution

Use `click` event handler and `toggle` function (for description check jquery API):

$('#button1').click(function() {
    // all trs with level-1 class inside abc table
    $('#abc tr.level-1').toggle();
});

$('#button1and2').click(function() {
    // all trs with level-1 or level-2 class inside abc table
    $('#abc tr.level-1, #abc tr.level-2').toggle();
});

http://jsfiddle.net/73JAV/

Problem

I have a table where my rows have classes: ``` <table id="abc"> <tr class="level-0"> <tr class="level-1"> <tr class="level-2"> </table> ``` I need to create two buttons. - [Hide level 1 and 2] - when clicks this hides or shows all the level-2 rows. - [Hide level 2] - when clicks this hides or shows the level-1 and level-2 rows. Can someone tell me how I can implement this with jQuery?

Original source

Related problems