showing/hiding table rows inside an HTML table

Question

I have created a basic table using HTML. This table has nested elements which open individually when you click on each assigned button. So when you click on a '+' icon it opens a sub menu, containing numerous table rows, each one of these has an icon 'pitch' that opens up what will be an information page when clicked on.

What is happening at the moment is that when i click '+' it reveals the sub-menu items so that all works fine

When i click the 'pitch' item, I want 3 things to happen. The row displaying that 'pitch' link and other info should then be hidden.

The row displaying the information (HELLO) should then become visible

When clicked, the '-' button should close the information (HELLO) section and then make the 'pitch' row visible again.

Can anyone please tell me how to amend the Javascript/HTML to make this happen?

I have attached the 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 is this JSFiddle so you will hopefully see what I mean.

Any help would be greatly appreciated.

Thanks

Answer 1

It should be quite easy, so:

- add .hide() to 'pitch' <tr>
- add a class to - to 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 this to hide 'pitch' row
});

$('.x').click(function(e) { // link to show pitcher has class 'x'
    e.preventDefault();
    $(this).closest('tr').prev().toggle(); // show pitcher again
    $(this).closest('tr').hide(); // hide '-' link    
});

See in the fiddle that I've added class=x to - link (to show pitcher again).

https://jsfiddle.net/w6dvyshj/13/ (only the first pitch works, just this one has class=x )

Answer 2

I have added one class to "-" anchor tag and modified javascript:

<table border=1>
    <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="#" class="hypen">-</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="#" class="hypen">-</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="#" class="hypen">-</a></td>
        <td>
            <p>HELLO</p>
        </td>
    </tr>





</table>


$(document).ready(function(){
    $(".toggler").click(function(e){
        e.preventDefault();
        $(this).toggleClass("expand");
        var className = 'cat'+$(this).attr('data-prod-cat');
        var $current= $(this).closest('tr').next();
        while($current.hasClass(className)){
            if($(this).hasClass("expand")){
               $current.show();
               $current = $current.next().next();
            }
            else{
               $current.hide();
               $current = $current.next();
            }

        }

    });
        $(".pitcher").click(function(e){
        e.preventDefault();
        var className = 'cat'+$(this).attr('data-prod-cat');
            $(this).parent().parent().toggle();
        $(this).closest('tr').next().toggle();
        });

    $(".hypen").click(function(e){

        e.preventDefault();

            $(this).parent().parent().hide();
        $(this).parent().parent().prev().show();
        });

});

added onclick event for "-" anchor and modified onclick event for "picher" check if it helps