Expandable menu that runs sql

JavaScript
1

I’m trying to put together this expandable menu that runs sql (using javascript and php). I’ve got the code below but I’m horrible with javascript and I can’t get two things to work.

I cannot figure out how to use the closall() function so that when the page opens all selections are closed.

I’m trying to get the mouseover colors and clickable areas and the only way I know how to do that is with a table so I thought I’d put a quick table in between the <li> but can’t figure out the whole onClick= to incorporate the # so that I can get rid of the <a href> tag part…

<?php
require("connect.php");
$connectmysql = mysql_connect($host,$user,$password) or die ($cantconnectmysqlmessage);
$db = mysql_select_db($database,$connectmysql) or die ($cantconnectdatabasemessage);
?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Remarks</title>
<script type="text/javascript" language="javascript1.3">
<!--
function closeall()
{
var divs=document.getElementsByTagName('div')
for(var i=0; i<divs.length; i++)
divs[i].style.display='none';
}
function clicked(element)
{
var div=document.getElementById(element)
if(div.style.display=='none')
div.style.display='block';
else
div.style.display='none';
return;
}
// -->
</script>
<link href="../HighVisibility/dstyles.css" rel="stylesheet" type="text/css" />
</head>
<body LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">
<div id='PageTop'>
  <div id='NavLogo'></div>
  <span id='ETranText'><!--<img src="images/MAXXFORCE_LOGO.png" border='0'></img>--></span></div>
<div id='PageTopBottom1'></div>
<div id='PageTopBottom2'></div>
<div id='PageTopBottom3'></div>
<div style='position: absolute; top: 145px; left: 10px;'>
  <ul type="disc">
<?php
$Disp1Query = "SELECT DISTINCT PREFIX FROM tblcr2md WHERE PREFIX <> '' ORDER BY PREFIX";
$Disp1Result = mysql_query($Disp1Query) or die(mysql_error().'<br />'.$Disp1Query);
while ($Row1 = mysql_fetch_assoc($Disp1Result))
{
 $SupplierCode = $Row1["PREFIX"];
 echo"<li><table width=100%><tr><td style=\\"Cursor:Hand\\" onClick=\\"clicked('".$SupplierCode."')\\" onMouseOver=\\"this.style.backgroundColor='#E4E7FF';\\" onMouseOut=\\"this.style.backgroundColor='#FFFFFF';\\" ><a href=\\"#\\" onClick=\\"clicked('".$SupplierCode."')\\">".$SupplierCode."</a></td></tr></table></li>";
    echo"<div id='".$SupplierCode."'>";
    echo"<ul type='square'>";
    $Disp2Query = "SELECT DISTINCT NAV_PN FROM tblcr2md WHERE PREFIX = '".$SupplierCode."' ORDER BY NAV_PN";
 $Disp2Result = mysql_query($Disp2Query) or die(mysql_error().'<br />'.$Disp2Query);
 while ($Row2 = mysql_fetch_assoc($Disp2Result))
 {
     echo"<li>".$Row2["NAV_PN"]."</li>";
 }
    echo"</ul>";
    echo"</div>";
}
?>
</body>
</html>
2

Here’s something else I’ve found that I can use. How do I get this to open collapsed every time it is opened?

<!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>Untitled Page</title>
    <script type="text/javascript">
    function ExpandCollapseTable(titleRow)
    {
        if(titleRow.parentNode.childNodes.length > 1)
        {
             if(titleRow.parentNode.childNodes[1].style.display=="block" || titleRow.parentNode.childNodes[1].style.display=="")
             {
                for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
                {
                    titleRow.parentNode.childNodes[i].style.display = "none";
                }
             }
             else
             {
                for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
                {
                    titleRow.parentNode.childNodes[i].style.display = "block";
                }
             }
        }
    }
    </script>
    </head>
    <body>
    <table border='0' bordercolor='#000000' width='100&#37;' cellspacing='0' cellpadding='0'>
      <tr onclick="ExpandCollapseTable(this);" style='cursor:pointer;'>
        <td colspan=3>Testing First Column</td>
      </tr>
      <tr>
        <td style='width: 100px'>1</td>
        <td style='width: 100px'>2</td>
        <td style='width: 100px'>3</td>
      </tr>
      <tr>
        <td style='width: 100px'>4</td>
        <td style='width: 100px'>5</td>
        <td style='width: 100px'>6</td>
      </tr>
      <tr>
        <td style='width: 100px'>7</td>
        <td style='width: 100px'>8</td>
        <td style='width: 100px'>9</td>
      </tr>
    </table>
</body>
</html>
3

bump…

4

Try below but uses jQuery…


<?php
require 'connect.php';
$connectmysql	= mysql_connect($host,$user,$password) or die ($cantconnectmysqlmessage);
$db				= mysql_select_db($database,$connectmysql) or die ($cantconnectdatabasemessage);

//initial query
$Disp1Query		= "SELECT DISTINCT PREFIX FROM tblcr2md WHERE PREFIX <> '' ORDER BY PREFIX";
$Disp1Result	= mysql_query($Disp1Query) or die(mysql_error().'<br />'.$Disp1Query);

?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Remarks</title>
<script type="text/javascript" src="jquery.min.js"></script>
<link href="../HighVisibility/dstyles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
	//<![CDATA[
	//uses jQuery which you can get from http://www.jquery.com
	$(function(){
		//uncomment below to hide clickable parent <li> on document open or load including children
		//$(".level-1").hide();
		//comment below to hide expanded <li> on document open or load
		$(".level-2").hide();
		
		//mouseover effect
		$(".level-1").mouseover(function(){
			$(this).css('background-color','#E4E7FF');
		});
		
		//mouseout effect
		$(".level-1").mouseout(function(){
			$(this).css('background-color','#FFFFFF');
		});
		
		//onclick handler : shows <div> content or expand
		$(".level-1").click(function(){
			$(".level-2").slideDown('slow');
		});
	});
	//]]>
</script>
<style type="text/css" media="screen">
	body { margin: 0; }
	.level-1 { width: 100&#37;; cursor:hand; }
</style>
</head>
<body style="margin:0;">
	<div id='PageTop'>
		<div id='NavLogo'></div>
		<span id='ETranText'><!--<img src="images/MAXXFORCE_LOGO.png" border='0'></img>--></span>
	</div>
	<div id='PageTopBottom1'></div>
	<div id='PageTopBottom2'></div>
	<div id='PageTopBottom3'></div>
	<div style='position: absolute; top: 145px; left: 10px;'>
  		<ul type="disc">
			<?php if($Disp1Result):?>
				<?php while($Row1 = mysql_fetch_assoc($Disp1Result)):?>
					<?php
						$SupplierCode = $Row1["PREFIX"];
						
						$Disp2Query = "SELECT DISTINCT NAV_PN FROM tblcr2md WHERE PREFIX = '".$SupplierCode."' ORDER BY NAV_PN";
						$Disp2Result = mysql_query($Disp2Query) or die(mysql_error().'<br />'.$Disp2Query);
					?>
					<li class="level-1">
						<a href="#"><?php echo $SupplierCode;?></a><br />
						<div id="<?php echo $SupplierCode;?>" class="level-2">
						<ul type='square'>
							<?php if($Disp2Result):?>
								<?php  while($Row2 = mysql_fetch_assoc($Disp2Result)):?>
									<li><?php echo $Row2["NAV_PN"];?></li>
								<?php endwhile;?>
							<?php else:?>
								<li>No data for '$Dis2Result'.</li>
							<?php endif;?>
						</ul>
						</div>
					</li>
				<?php endwhile;?>
			<?php else:?>
				<li>No data for '$Dis1Result'.</li>
			<?php endif;?>
  		</ul>
	</div>
</body>
</html>