CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-tabletoggle
Chris
Chris

Reputation: 199

Toggle opening all table rows with one click

I have created a basic table using HTML. This table has nested elements which are supposed to open individually when you click on each assigned toggle. So when you click on a '+' icon it opens the a sub menu which also has an icon 'pitch' that opens up what will be an information page when clicked on.

This works, however when i click on one of the '+' icons it opens both of the sub menus, likewise with the 'pitch' buttons, which obviously I dont want to happen, I want to be able to open and close these independently.

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="toggler" 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>
        <p>HELLO</p>
    </td>
</tr>
<tr class="cat1" style="display:none">
    <td><a href="#" class="toggler" 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>
        <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="toggler" 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>
        <p>HELLO</p>
    </td>
</tr>
</table>

Also I have attached a JSFiddle so you can see what I mean

Any help would be greatly appreciated, I have been struggling with this issue for some time.

Upvotes: 0

Views: 875

Answers (2)

Chris
Chris

Reputation: 199

UPDATE:- I have discovered that this only works when each main table entry (+) only has one sub menu item (pitch). If it has more than 1, it will only display the first sub-menu item.

I should re-phrase my question.

I now want to reveal all sub-menus related to a particular group and then be able to open their details individually.

I have updated the main question so you can see what I mean

Upvotes: 0

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

use can use .closest() and .next()

$(document).ready(function(){
    $(".toggler").click(function(e){
        e.preventDefault();
        $(this).closest('tr').next('.cat'+$(this).attr('data-prod-cat')).toggle();
    });
});

DEMO HERE

Upvotes: 1

Related Questions