Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQuery toggle rows on click

I'm trying to hide/show a subset of rows when clicking a row with a specific id.

Through a lot of searching the web and a lot of tries I got the code below.

Only problem is this code for some reason only hides/shows the very first set of rows.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
           <title>Test</title>

           <script src="http://code.jquery.com/jquery-1.5.1.min.js" type="text/javascript"></script>

           <script type="text/javascript">

             $(document).ready(function()
             {
                 $('#rowToClick').click(function ()
                 {
                     $(this).nextAll('tr').each( function()
                     {
                         if ($(this).is('#rowToClick'))
                        {
                           return false;
                        }
                        $(this).toggle();
                     });
                 });
             });
           </script>
         </head>          

<body>
<table>
    <tr id="rowToClick"><td>ClickMe</td></tr>
    <tr id="Tr1"><td>Toggled</td></tr>
    <tr id="Tr2"><td>Toggled</td></tr>
    <tr id="Tr3"><td>Toggled</td></tr>
    <tr id="Tr4"><td>Toggled</td></tr>
    <tr id="Tr5"><td>Toggled</td></tr>
    <tr id="rowToClick"><td>ClickMe</td></tr>
    <tr id="Tr6"><td>Toggled</td></tr>
    <tr id="Tr7"><td>Toggled</td></tr>
    <tr id="Tr8"><td>Toggled</td></tr>
    <tr id="Tr9"><td>Toggled</td></tr>
    <tr id="Tr10"><td>Toggled</td></tr>
</table>
</body>

</html>

Anyone has a suggestion and/or possible rewrite of the code?

---------- Update - Final solution -----------

I ended up with the solution below based on Brandon's input, as I wanted to do more nesting with the same behaviour, kind of like a collapsible tree view. Unfortunately that meant I had to add an extra attribute to keep track of the state, but I can live with that for now, until I find another way (ex. check visibility of the next row).

         $(document).ready(function () {
             toggleRows('.module','.namespace');
             toggleRows('.namespace','.type');
             toggleRows('.type','.member');
         });

         function toggleRows(parentClass,subClass)
         {
            $(parentClass).click(function () {

                if( $(this).attr("value")=="collapsed")                 
                {
                  $(this).attr("value","expanded");
                  $(this).nextUntil(parentClass).filter(subClass).toggle(true);
                }
                else
                {
                  $(this).attr("value","collapsed");
                  $(this).nextUntil(parentClass).attr("value","collapsed");
                  $(this).nextUntil(parentClass).toggle(false);
                }       

            });
         }
like image 870
Christian Mikkelsen Avatar asked Mar 29 '11 16:03

Christian Mikkelsen


2 Answers

First, you cannot have multiple rows with the same id. Instead of setting id to "rowToClick", set the css class:

<tr class='rowToClick'><td>click me</td></tr>

Next, this should work:

$(document).ready(function()
         {
             $(".rowToClick").click(function() { $(this).nextUntil(".rowToClick").toggle(); });
         });
like image 183
Brandon Avatar answered Oct 20 '22 00:10

Brandon


this is because the id attribute can only be used once for each id in a document. you should use the class attribute instead, and then in your jquery code, access the items with the class rowToClick with the $(".rowToClick") selector.

Hope this helps.

Andy

like image 2
Andbdrew Avatar answered Oct 19 '22 23:10

Andbdrew