Expand/Collapse Table

[kmcmullen]

I am looking to create the following JS Toggle Table:

DATE
TRACK
+TITLE
+TITLE

TRACK
+TITLE
+TITLE
+TITLE

When they click on the + I would like to then display the DESCRIPTION. I
almost have this working but need a little help.
When I click on the first +TITLE, the DESCRIPTION displays just fine but when
I click on the second or subsequent +TITLE it jumps back to the first +TITLE.

I am hoping this is just a misplacement of things as I am new to java.
Following is my code:



<SCRIPT LANGUAGE="JavaScript">
function expandcontract(tbodyid,ClickIcon) {
if (parent.document.getElementById(ClickIcon).innerHT ML == "+"){
parent.document.getElementById(tbodyid).style.disp lay = "";
parent.document.getElementById(ClickIcon).innerHTM L = "-";
} else {
parent.document.getElementById(tbodyid).style.disp lay = "none";
parent.document.getElementById(ClickIcon).innerHTM L = "+";
}
}
</SCRIPT>


<!--- Group by Date --->
<cfoutput query="GetSessions" group="DATE"><br>
<strong>#dateformat(DATE, "DDDD, MMMM DD, YYYY")#</strong>
<br>


<!--- Group by Track --->
<font color="0000FF"><cfoutput group="TRACK"><br>
<cfif #getsessions.track# is "AI"><em>Auto ID</em>
<cfelseif #getsessions.track# is "CE"><em>Collaborative Engineering</em>
<cfelseif #getsessions.track# is "EC"><em>Electronic Commerce and EDI</em>
<cfelseif #getsessions.track# is "MM"><em>Materials Management</em>
<cfelseif #getsessions.track# is "OE"><em>OEM</em>
<cfelseif #getsessions.track# is "QL"><em>Quality</em></font>
</cfif>

<!--- Group by Session --->
<cfoutput group="PRODUCT_MINOR">

<table>
<tr><td onclick="expandcontract('Row1','ClickIcon1')" id="ClickIcon1"
style="cursor: pointer; cursor: hand;">+</td><td>#PRODUCT_TITLE#</td></tr>


<tbody id="Row1" style="display:none">
<tr><td onclick="expandcontract('Row1','ClickIcon2')" id="ClickIcon1"
style="cursor: pointer; cursor: hand;"></td><td>#START_TIME# -
#END_TIME#<br>#DESCRIPTION#</td></tr>
</tbody>

</table>


</cfoutput><br>
</cfoutput>
</cfoutput>

Any help appreciated.

Thanks.
Kari

[cgsj_usa@yahoo.com]

Try converting

"parent.document.getElementById(tbodyid).style.dis play = "";" to "parent.document.getElementById(tbodyid).style.dis play = "block";"

Hopefully this helps. Thanks.

Chris

[kmcmullen]

Unfortunately, I still get the same result. They all expand to the very first +TITLE.

Thanks.
Kari

[kmcmullen]

I was able to get this working. Here is the code in case anyone is interested.
Thanks. Kari

<table>
<tr><td onclick="expandcontract('Row#currentrow#','ClickIc on#currentrow#')"
id="ClickIcon#currentrow#" style="cursor: pointer; cursor: hand;">+</td>
<td>#PRODUCT_TITLE#</td></tr>

<tbody id="Row#currentrow#" style="display:none">
<tr><td onclick="expandcontract('Row#currentrow#','ClickIc on#currentrow#')"
id="ClickIcon#currentrow#" style="cursor: pointer; cursor: hand;"></td>
<td>#START_TIME# - #END_TIME#<br>#DESCRIPTION#<br></td></tr>
</tbody>
</table>

[cm12]

Hello all

I have a question. Right now i have some text in a cell. I would like to add
a + that when clicked will expand a cell under this one to display more
information. it would also have a - to collapse it. Basically its like what
you see in some webpages where you get a snipit of info and if you expand you
get more. any idea on how to do this? many thanks

[Murray *ACE*]

[url]http://www.valleywebdesigns.com[/url] --> EasyFAQ

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================


"cm12" <webforumsuser@macromedia.com> wrote in message
news:efppnf$bju$1@forums.macromedia.com...

> Hello all
>
> I have a question. Right now i have some text in a cell. I would like to
> add
> a + that when clicked will expand a cell under this one to display more
> information. it would also have a - to collapse it. Basically its like
> what
> you see in some webpages where you get a snipit of info and if you expand
> you
> get more. any idea on how to do this? many thanks
>

[cm12]

I am not looking for a pay for solution....but merely to brighten myself and learn by gleaming from those that are willing to share.

[Murray *ACE*]

Then you would use the Change property behavior to change the property on
the information you want to 'toggle' from 'display:none' to 'display:block'.

Or, you could use a swap class extension (free from PVII -
[url]http://www.projectseven.com/[/url]) to swap the class on that toggled content from
one that specifies 'display:none' to one that specifies 'display:block'.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================


"cm12" <webforumsuser@macromedia.com> wrote in message
news:efqv6e$kn0$1@forums.macromedia.com...

>I am not looking for a pay for solution....but merely to brighten myself
>and learn by gleaming from those that are willing to share.

[cm12]

So....i will attach the behavior to the +, changing the block on the cell from display:none to dispaly block. i can have the default on page load be display:none?

this really helps.....thanks yoda

[Murray *ACE*]

Yes. The trick will be to change it back again. You can make each "+"
change one of them to display:block, and all the rest to "display:none"
which will do it for you....

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================


"cm12" <webforumsuser@macromedia.com> wrote in message
news:efr127$mo2$1@forums.macromedia.com...

> So....i will attach the behavior to the +, changing the block on the cell
> from display:none to dispaly block. i can have the default on page load
> be display:none?
>
> this really helps.....thanks yoda

[cm12]

ace

i appreciate your help, but seem to be lost. this is what i have done. i
have taken the cell and inserted a division. the division text is what will
display when expanded. I then went to the behavior tool box, and selected
change property, selected division. then what. do i enter block:block?

when i preview this nothing happens. how do i relate it back to the + sign.
And must i set a default of block:none? Could you be so kind as to give me a
1-5 step. I am so brand spankin new its embarrasing but i would GREATLy
appreciate your help. Kindly, caleb

[Murray *ACE*]

This is why $15 for a simple extension is a bargain.

Show me your code, please.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================


"cm12" <webforumsuser@macromedia.com> wrote in message
news:efrfqb$b32$1@forums.macromedia.com...

> ace
>
> i appreciate your help, but seem to be lost. this is what i have done. i
> have taken the cell and inserted a division. the division text is what
> will
> display when expanded. I then went to the behavior tool box, and selected
> change property, selected division. then what. do i enter block:block?
>
> when i preview this nothing happens. how do i relate it back to the +
> sign.
> And must i set a default of block:none? Could you be so kind as to give
> me a
> 1-5 step. I am so brand spankin new its embarrasing but i would GREATLy
> appreciate your help. Kindly, caleb
>
>

[cm12]

ace

maybe you are right. but i know nothing of extensions yet. so i am hesitant
to buy something i wont know how to implement. here is my code. the whole page

<!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>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length;
i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}

function MM_changeProp(objName,x,theProp,theValue) { //v6.0
var obj = MM_findObj(objName);
if (obj && (theProp.indexOf("style.")==-1 || obj.style)){
if (theValue == true || theValue == false)
eval("obj."+theProp+"="+theValue);
else eval("obj."+theProp+"='"+theValue+"'");
}
}
//-->
</script>
</head>

<body
onload="MM_preloadImages('Images/button2.jpg','Images/button2_about.jpg','Images
/button2_rates.jpg','Images/button2_contact.jpg')">
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="13" colspan="4" valign="top"><img src="Images/topbar.png"
width="700" height="5" align="bottom" /></td>
</tr>
<tr>
<td width="175"><a href="#" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('AboutMe','','Images/button2_about.jpg',1)"></a><a
href="#" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('AboutMe','','Images/button2_about.jpg',1)"></a><a
href="#" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('aboutme','','Images/button2_about.jpg',1)"><img
src="Images/button1_about.jpg" name="aboutme" width="176" height="50"
border="0" id="aboutme" /></a><a href="#" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('AboutMe','','Images/button2.jpg',1)"></a></td>
<td width="175"><img src="Images/button2_services.jpg" width="176"
height="50" /></td>
<td width="175"><a href="#" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Rates','','Images/button2_rates.jpg',1)"><img
src="Images/button1_rates.jpg" name="Rates" width="175" height="50" border="0"
id="Rates" /></a></td>
<td width="175"><a href="#" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Contact','','Images/button2_contact.jpg',1)"><img
src="Images/button1_contact.jpg" name="Contact" width="175" height="50"
border="0" id="Contact" /></a></td>
</tr>
</table>
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="13" colspan="3" valign="bottom"><img
src="Images/Untitled-1.png" width="700" height="5" align="bottom" /></td>
</tr>
<tr>
<td width="5" height="290" rowspan="9"
background="Images/bar.jpg">&nbsp;</td>
<td width="690" valign="top" class="paragraph"><p>Whether you are doing
anything or not right now: you are currently marketing your product. People are
recognizing your name, buying (or not!) your products, and associating your
organization with a certain feeling or set of ideas. No initaitive on your
part, doesn't mean you aren't playing the game. All it means is that you aren't
taking control, you arent effecting the market, but are instead letting the
market have control. It's important to remember that your business or
company<span class="paragraph_bold">will always</span>have a presence and that
being successful means taking control of this presence.</p>
<p>There are three themes that offer you an opportunity to initiate
control. When each is given the proper attention they work togeather like a
fluid machine to produce success. They are like gears in a fine watch: each of
them needs time and attention, each of them needs to be in working condition,
and each of them needs to stay well greased and cared for. </p> </td>
<td width="5" rowspan="9" background="Images/bar.jpg">&nbsp;</td>
</tr>
<tr>
<td valign="top" class="paragraph"><div align="center"><img
src="Images/gears.png" width="519" height="390" /></div></td>
</tr>
<tr>
<td valign="top" class="headings">Marketing</td>
</tr>
<tr>
<td valign="top" class="subparagraph">In short, the term marketing
describes an organizational function and a set of processes for creating,
communicating, and delivering value to customers. It is the first gear because
the other two gears turn to the tempo and speed of it. Marketing influences
what the branding and advertising gears will be.
[expand]
<div id="marketing"
onfocus="MM_changeProp('marketing','','display:non e','','DIV')">Content for New
Div Tag Goes Here</div></td>
</tr>
<tr>
<td valign="top" class="headings">Branding</td>
</tr>
<tr>
<td valign="top" class="subparagraph">Branding works to provide a clear
definition to the consumer of what and who you are. It is your umph, your
essence, your joi de vevre!
<div id="branding">Content for New Div Tag Goes Here</div></td>
</tr>
<tr>
<td valign="top" class="headings">Advertising</td>
</tr>
<tr>
<td valign="top" class="subparagraph">Advertising is nothing more than a
convesation between you and the market. It's your opportunity to express your
self and to communicate. This conversation can take many forms. Sometimes it
can be saying 'Hey look at me' other times 'This is what I am' or 'I am
better.' There isn't a limit as to the type of conversation or who you have the
conversation with.
<div id="advertising">Content for New Div Tag Goes Here</div></td>
</tr>
<tr>
<td valign="top" class="paragraph">&nbsp;</td>
</tr>
<tr>
<td width="5" height="19" background="Images/bar.jpg">&nbsp;</td>
<td width="690" height="5" valign="bottom"
background="Images/bar.jpg">&nbsp;</td>
<td width="5" background="Images/bar.jpg">&nbsp;</td>
</tr>
</table>
</body>
</html>