DarkPrince2005 Posted October 24, 2013 Share Posted October 24, 2013 Hi Guys and Gals The below code reads from a database and builds a tree structure. But my problem is in the collapse and expanding of the 'child' tr. Currently it expands the next tr, but if there is more than 1 child you have to first click the first chhild to expand the second child and so forth. Is there a way with jquery to expand a class until the next occurance of another class? <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> </head> <?php mysql_connect('localhost','root',''); mysql_select_db('samaedbm'); ini_set('display_errors', 1); ini_set('memory_limit', '640M'); ini_set('max_execution_time', 6000); error_reporting(E_ALL); function addnode($pid, $ind, $search){ global $modx; $sql = "select * from edbm_content where parentid = '".$pid. "' and description like '%". $search . "%'"; $ind .= '-'; $res = mysql_query($sql); while ($row = mysql_fetch_array($res)){ if ($pid == $row["id"]) { if (strlen($ind) == 1){ echo '<tr class="header0" id="header0"><td><span class="expanderSign">[+]</span> ' . $row["description"].'</td><td>'.$row["parentid"].'</td><td>'.$row["id"].'</td></tr>'; } } if ($pid != $row["id"]) { if (strlen($ind) == 1){ echo '<tr class="header1" id="header1" style="display:none;"><td style="padding-left:10px;"><span class="expanderSign">[+]</span> ' . $row["description"].'</td><td>'.$row["parentid"].'</td><td>'.$row["id"].'</td></tr>'; } if (strlen($ind) == 2){ echo '<tr class="header2" id="header2" data-for="header1" style="display:none;"><td style="padding-left:20px;"><span class="expanderSign">[+]</span> ' . $row["description"].'</td><td>'.$row["parentid"].'</td><td>'.$row["id"].'</td></tr>'; } if (strlen($ind) == 3){ echo '<tr data-for="header3" style="display:none;"><td style="padding-left:30px;"><span class="expanderSign">[+]</span> ' . $row["description"].'</td><td>'.$row["parentid"].'</td><td>'.$row["id"].'</td></tr>'; } addnode($row["id"], $ind, $search); } } return; } echo '<table style="font-size:13;">'; addnode(505000, '', ''); echo '</table>'; ?> <script type="text/javascript"> $(".header0").click(function() { $(".header1").slideToggle(500); if (jQuery(".expanderSign").text() == "[+]"){ jQuery(".expanderSign").text("[-]"); } else { jQuery(".expanderSign").text("[+]"); } }); $(".header1").children("td").click(function() { $(obj).closest('tr').nextAll(':has(.header2):first').find('.header2').show(); if (jQuery(".expanderSign").text() == "[+]"){ jQuery(".expanderSign").text("[-]"); } else { jQuery(".expanderSign").text("[+]"); } }); $(".header2").children("td").click(function() { $(this).parent().next("tr").show(); if (jQuery(".expanderSign").text() == "[+]"){ jQuery(".expanderSign").text("[-]"); } else { jQuery(".expanderSign").text("[+]"); } }); </script> Quote Link to comment https://forums.phpfreaks.com/topic/283237-jquery-expandcollapse-until-next-class/ Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.