JQUERY expand/collapse until next class

DarkPrince2005 · 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>

Sign In

JQUERY expand/collapse until next class

Recommended Posts

DarkPrince2005

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information