javascript - showing/hiding table rows inside an HTML table -

i have created basic table using html. table has nested elements open individually when click on each assigned button. when click on '+' icon opens sub menu, containing numerous table rows, each 1 of these has icon 'pitch' opens information page when clicked on.

what happening @ moment when click '+' reveals sub-menu items works fine

when click 'pitch' item, want 3 things happen. row displaying 'pitch' link , other info should hidden.

the row displaying information (hello) should become visible

when clicked, '-' button should close information (hello) section , make 'pitch' row visible again.

can please tell me how amend javascript/html make happen?

i have attached code below...

<table> <tr>     <td></td>     <td>column 1</td>     <td>column 2</td>     <td>column 3</td>     <td>column 4</td>     <td>column 4</td>     <td>column 5</td>     <td>column 6</td>     <td>column 7</td> </tr> <tr>     <td><a href="#" class="toggler" data-prod-cat="1">+ </a></td>     <td>company</td>     <td>47</td>     <td>123</td>     <td>22/10</td>     <td>***</td>     <td></td>     <td></td>         <td></td> </tr> <tr class="cat1" style="display:none">     <td><a href="#" class="pitcher" data-prod-cat="1">pitch </a></td>     <td>list</td>     <td>120</td>     <td>105</td>     <td>22/10</td>      <td>***</td>     <td>23/6/2015</td>     <td>14.95%</td>     <td>30%</td> </tr> <tr class="cat1" style="display:none">     <td><a href="#">-</a></td>     <td>          <p>hello</p>     </td> </tr> <tr class="cat1" style="display:none">     <td><a href="#" class="pitcher" data-prod-cat="1">pitch </a></td>     <td>list</td>     <td>120</td>     <td>105</td>     <td>22/10</td>      <td>***</td>     <td>23/6/2015</td>     <td>14.95%</td>     <td>30%</td> </tr> <tr class="cat1" style="display:none">      <td><a href="#">-</a></td>     <td>         <p>hello</p>     </td> </tr>   <tr>     <td><a href="#" class="toggler" data-prod-cat="1">+ </a></td>     <td>company</td>     <td>48</td>     <td>156</td>     <td>22/10</td>     <td>***</td>     <td></td>     <td></td>         <td></td> </tr> <tr class="cat1" style="display:none">     <td><a href="#" class="pitcher" data-prod-cat="1">pitch </a></td>     <td>list</td>     <td>156</td>     <td>256</td>     <td>22/10</td>      <td>***</td>     <td>23/6/2015</td>     <td>16.95%</td>     <td>30%</td> </tr> <tr class="cat1" style="display:none">      <td><a href="#">-</a></td>     <td>         <p>hello</p>     </td> </tr> 

also attached jsfiddle see mean.

any appreciated.

thanks

it should quite easy, so:

- add .hide() 'pitch' <tr>
- add class - handle events easily
- hide more info & show pitch again

$(".pitcher").click(function(e) {      e.preventdefault();     var classname = 'cat'+$(this).attr('data-prod-cat');     $(this).closest('tr').next().toggle();     $(this).closest('tr').hide(); // add hide 'pitch' row });  $('.x').click(function(e) { // link show pitcher has class 'x'     e.preventdefault();     $(this).closest('tr').prev().toggle(); // show pitcher again     $(this).closest('tr').hide(); // hide '-' link     }); 

see in fiddle i've added class=x - link (to show pitcher again).

https://jsfiddle.net/w6dvyshj/13/ (only first pitch works, 1 has class=x)