/    Sign up×
Community /Pin to ProfileBookmark

Collapse Rows

I currently have the following code. I’m trying to make rows collapse based on if they are in the group or not. I will probably be naming the rows the same ID. This one only collapses the last row in every group. Any ideas on what I am doing wrong?

[Code]
<html>
<head>
<meta name=”GENERATOR” content=”Microsoft FrontPage 6.0″>
<meta name=”ProgId” content=”FrontPage.Editor.Document”>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252″>
<title>My Start Page</title>
<LINK REL=STYLESHEET HREF=”/Clients/StyleSheets/StartPage.css” TYPE=”text/css”>
<LINK REL=STYLESHEET HREF=”/Clients/StyleSheets/dialog.css” TYPE=”text/css”>
<script type=”text/javascript”>
function toggleMe(a){
var i = 0;
var e=document.getElementById(a);
var img = document.getElementById(a+”IMG”);
if(!e)return true;
if(e.style.display==”none”){
e.style.display=”block”
img.src = “images/table/minus.gif”;
}
else{
e.style.display=”none”
img.src = “images/table/plus.gif”;
}
return true;
}
</script>
</head>
<body bgcolor=”#FFFFFF” topmargin=5 leftmargin=5>
<center>
<table cellpadding=0 cellspacing=0 border=0>
<tr id=”MainHeader”>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
<td class=”dlg_columnHeaderLeft”>Column</td>
<td class=”dlg_columnHeaderLeft”>Column1</td>
<td class=”dlg_columnHeaderLeft”>Column2</td>
<td class=”dlg_columnHeaderLeft”>Column3</td>
<td class=”dlg_columnHeaderLeft”>Column4</td>
</tr>
<tr id=”rwMain”>
<td align=right><a onclick=”toggleMe(‘rwMainSub’)”><img id=”rwMainSubIMG” src=”images/table/minus.gif” border=0></a></td>
<td class=”dlg_columnHeaderLeft”>Main</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
</tr>
<tr id=”rwMainSub”>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
<td class=”dlg_columnHeaderLeft”>MainSub</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
</tr>
<tr id=”rwMainSub”>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
<td class=”dlg_columnHeaderLeft”>MainSub</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
</tr>
<tr id=”rwSome”>
<td align=right><a onclick=”toggleMe(‘rwSomeSub’)”><img id=”rwSomeSubIMG” src=”images/table/minus.gif” border=0></a></td>
<td class=”dlg_columnHeaderLeft”>Some</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
</tr>
<tr><td colspan=6>
<tr id=”rwSomeSub”>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
<td align=right>&nbsp;</td>
<td class=”dlg_columnHeaderLeft”>SomeSub</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
</tr>
<tr id=”rwSomeSub”>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
<td align=right>&nbsp;</td>
<td class=”dlg_columnHeaderLeft”>SomeSub</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
</tr>
<tr id=”rwSomeSub”>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
<td align=right>&nbsp;</td>
<td class=”dlg_columnHeaderLeft”>SomeSub</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
</tr>
<tr id=”rwSomeSubMain”>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
<td align=right><a onclick=”toggleMe(‘rwSomeSubMainSub’)”><img id=”rwSomeSubMainSubIMG” src=”images/table/minus.gif” border=0></a></td>
<td class=”dlg_columnHeaderLeft”>SomeSubMain</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
</tr>
<tr id=”rwSomeSubMainSub”>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
<td align=right>&nbsp;</td>
<td class=”dlg_columnHeaderLeft”>SomeSubMainSub</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
</tr>
<tr id=”rwSomeSubMainSub”>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
<td align=right>&nbsp;</td>
<td class=”dlg_columnHeaderLeft”>SomeSubMainSub</td>
<td class=”dlg_columnHeaderLeft”>&nbsp;</td>
</tr>
</table>

</center>

</body>
</html>
[/Code]

Thanks,
Josh

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@FangMar 22.2006 — [URL=http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.2]id must be unique[/URL]
Copy linkTweet thisAlerts:
@JsterauthorMar 22.2006 — So what I should be doing is throwing each group into a div and hiding that div? Is there a a script that goes row by row and hides them.

Thanks,

Josh
Copy linkTweet thisAlerts:
@UltimaterMar 22.2006 — DIVs is the way to go.

Make sure to also correct your HTML.

I don't understand what this means:
<i>
</i> &lt;tr&gt;&lt;td colspan=6&gt;
&lt;tr id="rwSomeSub"&gt;

I'm assuming you meant:
<i>
</i> &lt;tr&gt;&lt;td colspan=6&gt;[color=blue]&lt;/td&gt;&lt;/tr&gt;[/color]
&lt;tr id="rwSomeSub"&gt;

and you are also lacking a DOCTYPE. Since you are already using the depreciated CENTER tag, I'd suggest the Transitional DOCTYPE.

If you don't use DIVs, your code might look something like this:
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta name="GENERATOR" content="Microsoft FrontPage 6.0"&gt;
&lt;meta name="ProgId" content="FrontPage.Editor.Document"&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=windows-1252"&gt;
&lt;title&gt;My Start Page&lt;/title&gt;
&lt;LINK REL=STYLESHEET HREF="/Clients/StyleSheets/StartPage.css" TYPE="text/css"&gt;
&lt;LINK REL=STYLESHEET HREF="/Clients/StyleSheets/dialog.css" TYPE="text/css"&gt;

&lt;script type="text/javascript"&gt;
document.getElementsByClassName=function(arg1){
var allels=document.getElementsByTagName("*");
var tmp;
var els=[];
for(var i=0;i&lt;allels.length;i++){
tmp=allels[i].className;
if(!tmp)continue;
if(tmp==arg1)els[els.length]=allels[i]
}
return els;
}
&lt;/script&gt;
&lt;script type="text/javascript"&gt;
function toggleMe(a){
var img, els=document.getElementsByClassName(a), l=els.length, i;

img = document.getElementById(a+"IMG");
img.src=(/minus.gif/.test(img.getAttribute("src")))?"images/table/plus.gif":"images/table/minus.gif";

for(i=0;i&lt;l;i++){
if(els[i].style.display=="none"){
els[i].style.display=""
}else{
els[i].style.display="none"
}
}

return true;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body style="margin-top:5px; margin-left:5px; background-color:white;color:black"&gt;
&lt;center&gt;
&lt;table cellpadding=0 cellspacing=0 border=0&gt;
&lt;tr class="MainHeader"&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;Column&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;Column1&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;Column2&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;Column3&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;Column4&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="rwMain"&gt;
&lt;td align=right&gt;&lt;a onclick="toggleMe('rwMainSub')"&gt;&lt;img id="rwMainSubIMG" src="images/table/minus.gif" border=0 alt=""&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;Main&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="rwMainSub"&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;MainSub&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="rwMainSub"&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;MainSub&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="rwSome"&gt;
&lt;td align=right&gt;&lt;a onclick="toggleMe('rwSomeSub')"&gt;&lt;img id="rwSomeSubIMG" src="images/table/minus.gif" border=0 alt="" &gt;&lt;/a&gt;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;Some&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;&lt;td colspan=6&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr class="rwSomeSub"&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;td align=right&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;SomeSub&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="rwSomeSub"&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;td align=right&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;SomeSub&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="rwSomeSub"&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;td align=right&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;SomeSub&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="rwSomeSubMain"&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;td align=right&gt;&lt;a onclick="toggleMe('rwSomeSubMainSub')"&gt;&lt;img id="rwSomeSubMainSubIMG" src="images/table/minus.gif" border=0 alt=""&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;SomeSubMain&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="rwSomeSubMainSub"&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;td align=right&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;SomeSubMainSub&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="rwSomeSubMainSub"&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;td align=right&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;SomeSubMainSub&lt;/td&gt;
&lt;td class="dlg_columnHeaderLeft"&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;


&lt;/center&gt;

&lt;/body&gt;
&lt;/html&gt;


Note how I turned all the IDs of the TRs into CLASSes. I'd have changed them into NAMES, yet TRs aren't allowed a NAME.

The above script works yet is very junky so I'd suggest using DIVs or even TABLES within TABLES instead.
×

Success!

Help @Jster spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...