Question

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?

Answer 1

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/