JavaScript Expand/Collapse

[DANDARSMASH]

Hello.

I'm trying to implement this into my site.

function toggle_visibility(tbid,lnkid) {
if (document.getElementsByTagName) {
  var tables = document.getElementsByTagName('table');
  for (var i = 0; i < tables.length; i++) {
   if (tables[i].id == tbid){
     var trs = tables[i].getElementsByTagName('tr');
     for (var j = 2; j < trs.length; j+=1) {
       if(trs[j].style.display == 'none') 
          trs[j].style.display = '';
       else 
          trs[j].style.display = 'none';
    }
   }
  }
 }
   var x = document.getElementById(lnkid);
   if (x.innerHTML == '[+] Expand ')
      x.innerHTML = '[-] Collapse ';
   else 
      x.innerHTML = '[+] Expand ';
}

It works on the original html version here:

<table width="800" border="0" align="center" cellpadding="4" cellspacing="0" id="tbl1" name="tbl1">
        <tr><td height="1" bgcolor="#727272" colspan="3"></td></tr>
        <tr bgcolor="#EEEEEE"><td height="15" colspan="2"> <strong>Project name 1</strong></td>
            <td bgcolor="#EEEEEE"><a href="javascript:toggle_visibility('tbl1','lnk1');">
            <div align="right" id="lnk1" name="lnk1">[+] Expand </div></a></td></tr>
        <tr style="{display='none'}"><td colspan="3"><div align="left">Short summary which describes Project 1.</div></td></tr>
        <tr style="{display='none'}" bgcolor="#EEEEEE"><td width="70%">File Name</td><td width="15%">Size</td><td  width="15%"></td></tr>

            <tr style="{display='none'}"><td>Document 1 of the project 1.doc</td><td>209.5 KB</td><td><a href="#">Download</a></td></tr>
.
.
.

But not when i try to plug it into php:

echo '<table width="100%" border="0" id="' . $tblName . '" name="' . $tblName . '" >';
	echo '<tr height="2" bgcolor="#6097D1"> <td colspan="10"></td></tr>';
	echo '<tr>';
		echo '<td colspan="9"> <div align="left"><strong>' . $colName . '</strong></div></td>';
		echo '<td colspan="1"><a href="javascript:toggle_visibility('.$tblName.','.$lnkName.');">';
		echo '<div align="right" id="' . $lnkName . '" name="' . $lnkName . '">[-] Collapse</div></a></td></tr>';
?>
<tr style="{display='none'}">
<?php
		echo '<th width="10%"><div align="left" >Portfolio</th>';
.
.
.

I've tried just about every combination of single/double quotes to get the tr style to work in php, but it doesn't work for me. Suggestions?

 

[feherke]

Hi

Actually this is not JavaScript question, belongs to forum434.

Personally I would prefer to use heredoc in such cases :

[b]echo[/b] <<<ENDOFCODE
[green][i]<table width="100%" border="0" id="$tblName" name="$tblName" >
<tr height="2" bgcolor="#6097D1"> <td colspan="10"></td></tr>
<tr>
<td colspan="9"> <div align="left"><strong>$colName</strong></div></td>
<td colspan="1"><a href="javascript:toggle_visibility('$tblName','$lnkName');">
<div align="right" id="$lnkName" name="$lnkName">[-] Collapse</div></a></td></tr>
[/i][/green]ENDOFCODE;

[tt]<tr style="{display='none'}">[/tt]

Sorry, but that is plain horrible :
[ul]
[li]No braces are needed in inline styles.[/li]
[li]CSS properties and values are separated by colon ( : ).[/li]
[li]CSS values other then those of string type need no quoting.[/li]
[/ul]

[b]<tr[/b] [maroon]style[/maroon][teal]=[/teal][green][i]"display: none"[/i][/green][b]>[/b]

Feherke.
feherke.github.io

 

[DANDARSMASH]

Thank you Feherke. Please excuse the bad code, I pulled that from a website somewhere. tr style="display: none" does hide the rows as intended, but the expand/collapse link doesn't work. Any suggestions?

 

[jpadie]

works for me in Safari.

both with and without explicitly setting the display to 'block'.

I get some jumpy artefacts caused by the div changing width, however. that's down to the styling.

 

[DANDARSMASH]

The issue has been resolved.

I converted my echo statements to html; making php the exception rather than the rule.

<td colspan="1"><a href="javascript:toggle_visibility('<?php echo $tblName;?>' , '<?php echo $lnkName;?>');">
<div align="right" id="<?php echo $lnkName; ?>" name="<?php echo $lnkName; ?>">[+] Expand</div></a></td>

Thanks for the help!