asked on

nested table rows collapse/expand using jquery

I need help creating expandable/collapsible table rows using jquery.

The table structure is:
<table>
<tr class="level1">
<td></td>
</tr>

<tr class="level2">
<td></td>
</tr>

<tr class="level3">
<td></td>
</tr>
<tr class="level4">
<td></td>
</tr>

</table>

So when i click 0n the level1 i want to close everything up until next level1, when level2 is clicked then level2 , level3, level4 is closed and so on

Lee Wadwell

something like

<body>
    <table>
        <tr class="lvlcollapse" level="1">
            <td>Level 1 #1</td>
        </tr>
        <tr class="lvlcollapse" level="2">
            <td>Level 2 #1</td>
        </tr>
        <tr class="lvlcollapse" level="3">
            <td>Level 3 #1</td>
        </tr>
        <tr class="lvlcollapse" level="4">
            <td>Level 4 #1</td>
        </tr>
        <tr class="lvlcollapse" level="1">
            <td>Level 1 #2</td>
        </tr>
        <tr class="lvlcollapse" level="2">
            <td>Level 2 #2</td>
        </tr>
        <tr class="lvlcollapse" level="3">
            <td>Level 3 #2</td>
        </tr>
    </table>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document).ready(function(){
        $(".lvlcollapse").click(function() {
            var level = $(this).attr("level");
            $(this).nextAll(".lvlcollapse").each(function() {
                var sublvl = $(this).attr("level");
                if ( sublvl > level ) {
                    $(this).toggle();
                } else {
                    return false;
                }
            });
	});
    });
</script>

Open in new window

erikTsomik

ASKER

IN each td I have an image. That image is what I am clicking on not the actual tr

Lee Wadwell

Oh ... you didn't mention that in the question. Will the <img> be in the <td> in the <tr>? It should still work ... have you tried?
If that is not what you want ... you will need to provide a more detailed description of the table and the behaviour you want.

erikTsomik

ASKER

here is my html. And i can not get it to work


            <table id="">
                  <tbody
                              <tr level="1" id="lvlcollapse" class="level1">
                                    <td><img width="20" height="20" src=""> Test 1</td>
                                    <td>09/15/2012</td>
                                    <td>
                                          0 % Complete

                                    </td>
                                    <td>

                                                 

                                    </td>
                                    <td> </td>
                                    <td> </td>
                              </tr>


                                    <tr level="2" id="lvlcollapse" class="level2">
                                          <td>
                                                <table id="tblLevel2">
                                                      <tbody><tr>
                                                            <td>

                                                                        <img width="20" height="20" src=""> test1
                                                            </td>
                                                      </tr>
                                                </tbody></table>
                                          </td>
                                          <td>09/10/2012</td>
                                          <td>
                                                0 % Complete

                                          </td>
                                          <td>

                                                       

                                          </td>
                                          <td>

                                          </td>
                                          <td> </td>
                                    </tr>


                                                      <tr level="3" id="lvlcollapse" class="level3">
                                                            <td>
                                                                  <table id="tblLevel4">
                                                                        <tbody><tr>
                                                                              <td>

                                                                                          <img width="20" height="20" src="">test2
                                                                              </td>
                                                                        </tr>
                                                                  </tbody></table>
                                                            </td>
                                                            <td>09/10/2012</td>
                                                            <td>

                                                                        Past Due

                                                            </td>
                                                            <td>

                                                                         

                                                            </td>
                                                            <td>

                                                                         

                                                            </td>
                                                            <td>

                                                                         

                                                            </td>
                                                      </tr>



                                                                  <tr class="level4">
                                                                        <td align="center" colspan="6">text</td>
                                                                  </tr>

                                                      <tr level="3" id="lvlcollapse" class="level3">
                                                            <td>
                                                                  <table id="tblLevel4">
                                                                        <tbody><tr>
                                                                              <td>

                                                                                          <img width="20" height="20" src=""> test3
                                                                              </td>
                                                                        </tr>
                                                                  </tbody></table>
                                                            </td>
                                                            <td>09/10/2012</td>
                                                            <td>

                                                                        Past Due

                                                            </td>
                                                            <td>

                                                                         

                                                            </td>
                                                            <td>

                                                                         

                                                            </td>
                                                            <td>

                                                                         

                                                            </td>
                                                      </tr>



                                                                  <tr class="level4">
                                                                        <td align="center" colspan="6">text</td>
                                                                  </tr>

                                    <tr level="2" id="lvlcollapse" class="level2">
                                          <td>
                                                <table id="tblLevel2">
                                                      <tbody><tr>
                                                            <td>

                                                                              <img width="20" height="20" src=""> test3
                                                            </td>
                                                      </tr>
                                                </tbody></table>
                                          </td>
                                          <td>09/15/2012</td>
                                          <td>

                                                            Not Complete

                                          </td>
                                          <td>

                                                       

                                          </td>
                                          <td>

                                          </td>
                                          <td> </td>
                                    </tr>


                                                      <tr>
                                                            <td colspan="6">text</td>
                                                      </tr>

            </tbody></table>

erikTsomik

ASKER

so is there any solutions to the problem

erikTsomik

ASKER

I tried the code and partially working for me. So when I click to collapse first time the level1 it works , then when I click level to to collapse level 2 is collapsing then if click level 1 to expand it collapse the whole thing .

erikTsomik

ASKER

any suggestions?

Lee Wadwell

Sorry .. I have been distracted on other things today. I have been looking into it when I have had a chance. As it is 1:30AM now, I will going to bed soon.

The way the code I wrote works is that it only collapses the rows below the row that is clicked if their level is less than the clicked ones.
If you collapsed the clicked row ... and you clicked on the first row ... there would be nothing left to click on to expand it again. How would you propose to overcome that?

I have also been working on overcoming an issue I found with nested collapses as well. Another change I am working on is removing the use of non-standard attribute names and using class names instead.

erikTsomik

ASKER

good. I looking forward hearing from you

ASKER CERTIFIED SOLUTION

Lee Wadwell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

erikTsomik

ASKER

Perfect Thank you

erikTsomik

ASKER

Hi lwadwell. I start testing the code and I ve noticed that if I click on any row that do not have an icon I am still collapsing / expanding that row,. I there a way it can be fixed .

Thank you
test.txt

Lee Wadwell

Sorry ... been very sick the last few days.
Being click to collapse is driven by the existence of the 'lvlcollapse' class ... remove the class if you do not what the click event to be added.
If you want the icon ... they need to be added initially manually. It may be possible to add them automatically, but as it is inside a table - there are many complications to consider.

erikTsomik

ASKER

how can I make a only expand level 1