By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,285 Members | 2,147 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,285 IT Pros & Developers. It's quick & easy.

show/hide a table row

P: n/a
oLE
I would like to add some javascript to show/hide a certain row of a
table. The first row of the table contain the hyperlink that calls the
javascript the second row is the one i want to show/hide with the
javascript in a toggle fashion.

the problem is a know very little javascript and have become incredibly
frustrated because i went ahead thinking it was going to be like C. its not.

I know i can use these lines to do the actual work:

document.getElementById("row").style.display = "none"; // hides row
document.getElementById("row").style.display = "inline"; // shows row

but I don't think i can use a getElementById exactly because i want to
reference the element via its relationship to the hyperlink that calls
the javascript, i know this can be done. You see there will be several
tables on one page and i want to be able to toggle each one
independently; hopefully with the same bit of javascript.

any help greatly appriecated,
thanks in advance.

oLE
Jul 23 '05 #1
Share this Question
Share on Google+
10 Replies


P: n/a

"oLE" <ol****@dsl.pipex.com> wrote in message
news:41*********************@news.dial.pipex.com.. .
I would like to add some javascript to show/hide a certain row of a
table. The first row of the table contain the hyperlink that calls the
javascript the second row is the one i want to show/hide with the
javascript in a toggle fashion.

the problem is a know very little javascript and have become incredibly
frustrated because i went ahead thinking it was going to be like C. its not.
I know i can use these lines to do the actual work:

document.getElementById("row").style.display = "none"; // hides row
document.getElementById("row").style.display = "inline"; // shows row

but I don't think i can use a getElementById exactly because i want to
reference the element via its relationship to the hyperlink that calls
the javascript, i know this can be done. You see there will be several
tables on one page and i want to be able to toggle each one
independently; hopefully with the same bit of javascript.

any help greatly appriecated,
thanks in advance.

oLE


Hi Ole

Have a look at www.corstorphinehouse.com/d/avail.html, it is a bit
complicated, but it may help you...
Jul 23 '05 #2

P: n/a
oLE wrote:
I would like to add some javascript to show/hide a certain row of a
table. The first row of the table contain the hyperlink that calls the javascript the second row is the one i want to show/hide with the
javascript in a toggle fashion.

the problem is a know very little javascript and have become incredibly frustrated because i went ahead thinking it was going to be like C. its not.
I know i can use these lines to do the actual work:

document.getElementById("row").style.display = "none"; // hides row
document.getElementById("row").style.display = "inline"; // shows row

but I don't think i can use a getElementById exactly because i want to reference the element via its relationship to the hyperlink that calls the javascript, i know this can be done. You see there will be several tables on one page and i want to be able to toggle each one
independently; hopefully with the same bit of javascript.

any help greatly appriecated,
thanks in advance.

oLE


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">

body {
font: 80% verdana;
background : #600;
}
#redtable {
width: 400px;
margin: 24px auto;
background: #faa;
}
#greentable {
width: 400px;
margin: 24px auto;
background: #afa;
}
#bluetable {
width: 400px;
margin: 24px auto;
background: #aaf;
}
td {
letter-spacing: .5em;
text-align: center;
border: 3px #fff groove;
}
td a {
letter-spacing: .05em;
color: #000;
}
td a:hover {
color: #f00;
}

</style>
<script type="text/javascript">
//<![CDATA[

function toggle(oLink)
{
var obj = oLink;
///start at Link node
while (obj && !/tbody/i.test(obj.parentNode.nodeName))
//traverse up to tbody
obj = obj.parentNode;
//then over to next tr
var nextrow = obj.nextSibling;
if (null != nextrow)
{
//Style object
var s = nextrow.style;
//toggle display
s.display = (s.display == 'none') ? '' : 'none';
var txt = 'show rowhide row';
//remove current link text from string
txt = txt.replace(oLink.firstChild.nodeValue, '');
//append remaining substring
oLink.replaceChild(document.createTextNode(txt), oLink.firstChild);
}
}

//]]>
</script>
</head>
<body>
<table id="redtable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
<table id="greentable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
<table id="bluetable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
</body>
</html>

Table elements have their own proprietary CSS display values.
For rows it's ---> "table-row".
There seems to be some controversy about the portability of
setting CSS display to the empty string, which in theory will
cause the browser to supply the default (rendered value). Sure
they'll be some comment on this...
http://www.blooberry.com/indexdot/cs...fy/display.htm

Jul 23 '05 #3

P: n/a
oLE
RobB wrote:
oLE wrote:
I would like to add some javascript to show/hide a certain row of a
table. The first row of the table contain the hyperlink that calls


the
javascript the second row is the one i want to show/hide with the
javascript in a toggle fashion.

the problem is a know very little javascript and have become


incredibly
frustrated because i went ahead thinking it was going to be like C.


its not.
I know i can use these lines to do the actual work:

document.getElementById("row").style.display = "none"; // hides row
document.getElementById("row").style.display = "inline"; // shows row

but I don't think i can use a getElementById exactly because i want


to
reference the element via its relationship to the hyperlink that


calls
the javascript, i know this can be done. You see there will be


several
tables on one page and i want to be able to toggle each one
independently; hopefully with the same bit of javascript.

any help greatly appriecated,
thanks in advance.

oLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">

body {
font: 80% verdana;
background : #600;
}
#redtable {
width: 400px;
margin: 24px auto;
background: #faa;
}
#greentable {
width: 400px;
margin: 24px auto;
background: #afa;
}
#bluetable {
width: 400px;
margin: 24px auto;
background: #aaf;
}
td {
letter-spacing: .5em;
text-align: center;
border: 3px #fff groove;
}
td a {
letter-spacing: .05em;
color: #000;
}
td a:hover {
color: #f00;
}

</style>
<script type="text/javascript">
//<![CDATA[

function toggle(oLink)
{
var obj = oLink;
///start at Link node
while (obj && !/tbody/i.test(obj.parentNode.nodeName))
//traverse up to tbody
obj = obj.parentNode;
//then over to next tr
var nextrow = obj.nextSibling;
if (null != nextrow)
{
//Style object
var s = nextrow.style;
//toggle display
s.display = (s.display == 'none') ? '' : 'none';
var txt = 'show rowhide row';
//remove current link text from string
txt = txt.replace(oLink.firstChild.nodeValue, '');
//append remaining substring
oLink.replaceChild(document.createTextNode(txt), oLink.firstChild);
}
}

//]]>
</script>
</head>
<body>
<table id="redtable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
<table id="greentable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
<table id="bluetable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
</body>
</html>

Table elements have their own proprietary CSS display values.
For rows it's ---> "table-row".
There seems to be some controversy about the portability of
setting CSS display to the empty string, which in theory will
cause the browser to supply the default (rendered value). Sure
they'll be some comment on this...
http://www.blooberry.com/indexdot/cs...fy/display.htm


thanks for your help RobB and WindAndWaves, i'll give these a go.

oLE
Jul 23 '05 #4

P: n/a
On Mon, 13 Dec 2004 09:47:49 +0000, oLE <ol****@dsl.pipex.com> wrote:

[snip]
document.getElementById("row").style.display = "inline"; // shows row
If you did do that, you'd almost certainly have problems.

Table rows are not inline elements. They're closer to block elements but
they have their own display value: table-row. However, as IE doesn't
support that (it incorrectly uses block), it is best not to specify a
value at all. Instead, assign an empty string to remove the inline style
causing the page stylesheet to take effect.

As a side-effect, this will enforce something that should happen anyway:
you must not hide the row initially using CSS. The reason for this is that
users without the necessary scripting support will never be able to see
the row. Instead, hide the row via scripting.
but I don't think i can use a getElementById exactly because i want to
reference the element via its relationship to the hyperlink that calls
the javascript


Unless you actually tell us what that relationship is - preferably by
linking to the document in question - it's difficult to give you anything
useful.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #5

P: n/a
oLE
RobB wrote:
oLE wrote:
I would like to add some javascript to show/hide a certain row of a
table. The first row of the table contain the hyperlink that calls


the
javascript the second row is the one i want to show/hide with the
javascript in a toggle fashion.

the problem is a know very little javascript and have become


incredibly
frustrated because i went ahead thinking it was going to be like C.


its not.
I know i can use these lines to do the actual work:

document.getElementById("row").style.display = "none"; // hides row
document.getElementById("row").style.display = "inline"; // shows row

but I don't think i can use a getElementById exactly because i want


to
reference the element via its relationship to the hyperlink that


calls
the javascript, i know this can be done. You see there will be


several
tables on one page and i want to be able to toggle each one
independently; hopefully with the same bit of javascript.

any help greatly appriecated,
thanks in advance.

oLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">

body {
font: 80% verdana;
background : #600;
}
#redtable {
width: 400px;
margin: 24px auto;
background: #faa;
}
#greentable {
width: 400px;
margin: 24px auto;
background: #afa;
}
#bluetable {
width: 400px;
margin: 24px auto;
background: #aaf;
}
td {
letter-spacing: .5em;
text-align: center;
border: 3px #fff groove;
}
td a {
letter-spacing: .05em;
color: #000;
}
td a:hover {
color: #f00;
}

</style>
<script type="text/javascript">
//<![CDATA[

function toggle(oLink)
{
var obj = oLink;
///start at Link node
while (obj && !/tbody/i.test(obj.parentNode.nodeName))
//traverse up to tbody
obj = obj.parentNode;
//then over to next tr
var nextrow = obj.nextSibling;
if (null != nextrow)
{
//Style object
var s = nextrow.style;
//toggle display
s.display = (s.display == 'none') ? '' : 'none';
var txt = 'show rowhide row';
//remove current link text from string
txt = txt.replace(oLink.firstChild.nodeValue, '');
//append remaining substring
oLink.replaceChild(document.createTextNode(txt), oLink.firstChild);
}
}

//]]>
</script>
</head>
<body>
<table id="redtable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
<table id="greentable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
<table id="bluetable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
</body>
</html>

Table elements have their own proprietary CSS display values.
For rows it's ---> "table-row".
There seems to be some controversy about the portability of
setting CSS display to the empty string, which in theory will
cause the browser to supply the default (rendered value). Sure
they'll be some comment on this...
http://www.blooberry.com/indexdot/cs...fy/display.htm


RobB this is great stuff i think i can get it to work on my site.
To show you exactly what i need to do look at
www.olespace.com/content_rants.php

the text inside those big tables is the row i want to show and hide, it
needs to start out hidden as well.

i was also hoping to use an two images (on and off state) for the
show/hide hyperlink but don't worry if that's too difficult.

oLE
Jul 23 '05 #6

P: n/a
oLE wrote:

(snip)
RobB this is great stuff i think i can get it to work on my site.
To show you exactly what i need to do look at
www.olespace.com/content_rants.php

the text inside those big tables is the row i want to show and hide, it needs to start out hidden as well.

i was also hoping to use an two images (on and off state) for the
show/hide hyperlink but don't worry if that's too difficult.

oLE

Addl. CSS:

..contract {
display: none;
}
..expand {
[anything but display]
}
td a img {
border: none;
}
..preload {
background:
url(http://www.softcomplex.com/products/tigra_tree_menu/icons/folderopen.gif);}
JS:

function toggle(node1)
{
if (document.getElementById && document.createTextNode)
{
var node2 = node1;
while ((node2 = node2.parentNode) && !/tr/i.test(node2.nodeName))
continue;
while ((node2 = node2.nextSibling) && !/tr/i.test(node2.nodeName))
continue;
if (null != node2)
{
var cnames = 'expandcontract', i = 0;
node2.className = cnames.replace(node2.className, '');
node1 = node1.childNodes;
while ((node1 = node1.item(i++)) && !/img/i.test(node1.nodeName))
continue;
if (null != node1)
node1.src = (/folderopen/.test(node1.src)) ?
node1.src.replace(/folderopen/, 'folder') :
node1.src.replace(/folder/, 'folderopen');
}
}
return false;
}
HTML:

<table width="100%" cellpadding="10" class="rantbox">
<tbody>
<tr>
<td>
<a href="#null" onclick="return toggle(this)">
<img
src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"
/>
</a><b>Monory</b> Nothing is Limitless<hr>
</td>
</tr>
<tr class="contract">
<td width="50%">
News of an exciting new announcement from Google Labs, this is what
Google's
Director of new Technology had to say:<p><p>.....

...............
...............

Posted by oLE on 10th December 2004 at 15:13:10
</tr></td></tbody></table>
<br></br>
<table width="100%" cellpadding="10" class="rantbox">
<tbody>
<tr>
<td>
<a href="#null" onclick="return toggle(this)"><img
src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"
/></a>
<b>Fill This Space</b> Got a Rant?<hr>
</td>
</tr>
<tr class="contract">
<td width="50%">
<a href="mailto:ol****@dsl.pipex.com">Email.........
googlegroups will probably mangle this so, watch for word (c)rap.
Just a guess on the image trigger.
Be sure and return false on any hyperlink onclick call.

Jul 23 '05 #7

P: n/a
oLE
RobB wrote:
oLE wrote:

(snip)

RobB this is great stuff i think i can get it to work on my site.
To show you exactly what i need to do look at
www.olespace.com/content_rants.php

the text inside those big tables is the row i want to show and hide,


it
needs to start out hidden as well.

i was also hoping to use an two images (on and off state) for the
show/hide hyperlink but don't worry if that's too difficult.

oLE


Addl. CSS:

.contract {
display: none;
}
.expand {
[anything but display]
}
td a img {
border: none;
}
.preload {
background:
url(http://www.softcomplex.com/products/tigra_tree_menu/icons/folderopen.gif);}
JS:

function toggle(node1)
{
if (document.getElementById && document.createTextNode)
{
var node2 = node1;
while ((node2 = node2.parentNode) && !/tr/i.test(node2.nodeName))
continue;
while ((node2 = node2.nextSibling) && !/tr/i.test(node2.nodeName))
continue;
if (null != node2)
{
var cnames = 'expandcontract', i = 0;
node2.className = cnames.replace(node2.className, '');
node1 = node1.childNodes;
while ((node1 = node1.item(i++)) && !/img/i.test(node1.nodeName))
continue;
if (null != node1)
node1.src = (/folderopen/.test(node1.src)) ?
node1.src.replace(/folderopen/, 'folder') :
node1.src.replace(/folder/, 'folderopen');
}
}
return false;
}
HTML:

<table width="100%" cellpadding="10" class="rantbox">
<tbody>
<tr>
<td>
<a href="#null" onclick="return toggle(this)">
<img
src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"
/>
</a><b>Monory</b> Nothing is Limitless<hr>
</td>
</tr>
<tr class="contract">
<td width="50%">
News of an exciting new announcement from Google Labs, this is what
Google's
Director of new Technology had to say:<p><p>.....

..............
..............

Posted by oLE on 10th December 2004 at 15:13:10
</tr></td></tbody></table>
<br></br>
<table width="100%" cellpadding="10" class="rantbox">
<tbody>
<tr>
<td>
<a href="#null" onclick="return toggle(this)"><img
src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"
/></a>
<b>Fill This Space</b> Got a Rant?<hr>
</td>
</tr>
<tr class="contract">
<td width="50%">
<a href="mailto:ol****@dsl.pipex.com">Email.........
googlegroups will probably mangle this so, watch for word (c)rap.
Just a guess on the image trigger.
Be sure and return false on any hyperlink onclick call.


http://www.olespace.com/test.htm

working. if is still does the same when i add in the php and stuff then
i'm more than happy. thank you so much for all your help rob, i really
appreciate it, you have saved my life here. I'll make sure the source
code credits you.

oLE
Jul 23 '05 #8

P: n/a
oLE
oLE wrote:
RobB wrote:
oLE wrote:

(snip)

RobB this is great stuff i think i can get it to work on my site.
To show you exactly what i need to do look at
www.olespace.com/content_rants.php

the text inside those big tables is the row i want to show and hide,

it
needs to start out hidden as well.

i was also hoping to use an two images (on and off state) for the
show/hide hyperlink but don't worry if that's too difficult.

oLE



Addl. CSS:

.contract {
display: none;
}
.expand {
[anything but display]
}
td a img {
border: none;
}
.preload {
background:
url(http://www.softcomplex.com/products/tigra_tree_menu/icons/folderopen.gif);}

JS:

function toggle(node1)
{
if (document.getElementById && document.createTextNode)
{
var node2 = node1;
while ((node2 = node2.parentNode) && !/tr/i.test(node2.nodeName))
continue;
while ((node2 = node2.nextSibling) && !/tr/i.test(node2.nodeName))
continue;
if (null != node2)
{
var cnames = 'expandcontract', i = 0;
node2.className = cnames.replace(node2.className, '');
node1 = node1.childNodes;
while ((node1 = node1.item(i++)) && !/img/i.test(node1.nodeName))
continue;
if (null != node1)
node1.src = (/folderopen/.test(node1.src)) ?
node1.src.replace(/folderopen/, 'folder') :
node1.src.replace(/folder/, 'folderopen');
}
}
return false;
}
HTML:

<table width="100%" cellpadding="10" class="rantbox">
<tbody>
<tr>
<td>
<a href="#null" onclick="return toggle(this)">
<img
src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"

/>
</a><b>Monory</b> Nothing is Limitless<hr>
</td>
</tr>
<tr class="contract">
<td width="50%">
News of an exciting new announcement from Google Labs, this is what
Google's
Director of new Technology had to say:<p><p>.....

..............
..............

Posted by oLE on 10th December 2004 at 15:13:10
</tr></td></tbody></table>
<br></br>
<table width="100%" cellpadding="10" class="rantbox">
<tbody>
<tr>
<td>
<a href="#null" onclick="return toggle(this)"><img
src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"

/></a>
<b>Fill This Space</b> Got a Rant?<hr>
</td>
</tr>
<tr class="contract">
<td width="50%">
<a href="mailto:ol****@dsl.pipex.com">Email.........
googlegroups will probably mangle this so, watch for word (c)rap.
Just a guess on the image trigger.
Be sure and return false on any hyperlink onclick call.


http://www.olespace.com/test.htm

working. if is still does the same when i add in the php and stuff then
i'm more than happy. thank you so much for all your help rob, i really
appreciate it, you have saved my life here. I'll make sure the source
code credits you.

oLE


sorry for double post but you might want to look at www.olespace.com and
then click rants on the nav bar to see it in proper working action.
can't get the pluses to turn to minuses but to be honest i don't care.

oLE
Jul 23 '05 #9

P: n/a
oLE wrote:
oLE wrote:
RobB wrote:
oLE wrote:

(snip)
RobB this is great stuff i think i can get it to work on my site.
To show you exactly what i need to do look at
www.olespace.com/content_rants.php

the text inside those big tables is the row i want to show and hide,

it

needs to start out hidden as well.

i was also hoping to use an two images (on and off state) for the
show/hide hyperlink but don't worry if that's too difficult.

oLE


Addl. CSS:

.contract {
display: none;
}
.expand {
[anything but display]
}
td a img {
border: none;
}
.preload {
background:
url(http://www.softcomplex.com/products/tigra_tree_menu/icons/folderopen.gif);}

JS:

function toggle(node1)
{
if (document.getElementById && document.createTextNode)
{
var node2 = node1;
while ((node2 = node2.parentNode) && !/tr/i.test(node2.nodeName))
continue;
while ((node2 = node2.nextSibling) && !/tr/i.test(node2.nodeName))
continue;
if (null != node2)
{
var cnames = 'expandcontract', i = 0;
node2.className = cnames.replace(node2.className, '');
node1 = node1.childNodes;
while ((node1 = node1.item(i++)) && !/img/i.test(node1.nodeName))
continue;
if (null != node1)
node1.src = (/folderopen/.test(node1.src)) ?
node1.src.replace(/folderopen/, 'folder') :
node1.src.replace(/folder/, 'folderopen');
}
}
return false;
}
HTML:

<table width="100%" cellpadding="10" class="rantbox">
<tbody>
<tr>
<td>
<a href="#null" onclick="return toggle(this)">
<img
src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"

/>
</a><b>Monory</b> Nothing is Limitless<hr>
</td>
</tr>
<tr class="contract">
<td width="50%">
News of an exciting new announcement from Google Labs, this is what Google's
Director of new Technology had to say:<p><p>.....

..............
..............

Posted by oLE on 10th December 2004 at 15:13:10
</tr></td></tbody></table>
<br></br>
<table width="100%" cellpadding="10" class="rantbox">
<tbody>
<tr>
<td>
<a href="#null" onclick="return toggle(this)"><img
src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"

/></a>
<b>Fill This Space</b> Got a Rant?<hr>
</td>
</tr>
<tr class="contract">
<td width="50%">
<a href="mailto:ol****@dsl.pipex.com">Email.........
googlegroups will probably mangle this so, watch for word (c)rap.
Just a guess on the image trigger.
Be sure and return false on any hyperlink onclick call.

http://www.olespace.com/test.htm

working. if is still does the same when i add in the php and stuff then i'm more than happy. thank you so much for all your help rob, i really appreciate it, you have saved my life here. I'll make sure the source code credits you.

oLE


sorry for double post but you might want to look at www.olespace.com

and then click rants on the nav bar to see it in proper working action.
can't get the pluses to turn to minuses but to be honest i don't care.
oLE


Yes you do....

See this?
...............
node1.src = (/folderopen/.test(node1.src)) ?
node1.src.replace(/folderopen/, 'folder') :
node1.src.replace(/folder/, 'folderopen');
...............

It's what switches the icon's src. Obviously, it's set up for that
demo, with its folder images ('folder.gif', 'folderopen.gif'). You'll
need to change it for those new pix:

node1.src = (/plus/.test(node1.src)) ?
node1.src.replace(/plus/, 'minus') :
node1.src.replace(/minus/, 'plus');

Just guessing that the other image is
'http://www.olespace.com/gfx/minus.gif'. Also - this CSS should be...

..preload {
background-image: url(http://www.olespace.com/gfx/minus.gif);
}

....as it's designed solely to preload the alternate image. hth

Jul 23 '05 #10

P: n/a


oLE wrote:
oLE wrote:
RobB wrote:
oLE wrote:

(snip)
RobB this is great stuff i think i can get it to work on my site.
To show you exactly what i need to do look at
www.olespace.com/content_rants.php

the text inside those big tables is the row i want to show and hide,

it

needs to start out hidden as well.

i was also hoping to use an two images (on and off state) for the
show/hide hyperlink but don't worry if that's too difficult.

oLE


Addl. CSS:

.contract {
display: none;
}
.expand {
[anything but display]
}
td a img {
border: none;
}
.preload {
background:
url(http://www.softcomplex.com/products/...ons/folderopen
.gif);}
JS:

function toggle(node1)
{
if (document.getElementById && document.createTextNode)
{
var node2 = node1;
while ((node2 = node2.parentNode) && !/tr/i.test(node2.nodeName))
continue;
while ((node2 = node2.nextSibling) && !/tr/i.test(node2.nodeName))
continue;
if (null != node2)
{
var cnames = 'expandcontract', i = 0;
node2.className = cnames.replace(node2.className, '');
node1 = node1.childNodes;
while ((node1 = node1.item(i++)) && !/img/i.test(node1.nodeName))
continue;
if (null != node1)
node1.src = (/folderopen/.test(node1.src)) ?
node1.src.replace(/folderopen/, 'folder') :
node1.src.replace(/folder/, 'folderopen');
}
}
return false;
}
HTML:

<table width="100%" cellpadding="10" class="rantbox">
<tbody>
<tr>
<td>
<a href="#null" onclick="return toggle(this)">
<img
src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gi
f"
/>
</a><b>Monory</b> Nothing is Limitless<hr>
</td>
</tr>
<tr class="contract">
<td width="50%">
News of an exciting new announcement from Google Labs, this is what
Google's
Director of new Technology had to say:<p><p>.....

..............
..............

Posted by oLE on 10th December 2004 at 15:13:10
</tr></td></tbody></table>
<br></br>
<table width="100%" cellpadding="10" class="rantbox">
<tbody>
<tr>
<td>
<a href="#null" onclick="return toggle(this)"><img
src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gi
f"
/></a>
<b>Fill This Space</b> Got a Rant?<hr>
</td>
</tr>
<tr class="contract">
<td width="50%">
<a href="mailto:ol****@dsl.pipex.com">Email.........
googlegroups will probably mangle this so, watch for word (c)rap.
Just a guess on the image trigger.
Be sure and return false on any hyperlink onclick call.

http://www.olespace.com/test.htm

working. if is still does the same when i add in the php and stuff then i'm more than happy. thank you so much for all your help rob, i really appreciate it, you have saved my life here. I'll make sure the source code credits you.

oLE


sorry for double post but you might want to look at www.olespace.com

and then click rants on the nav bar to see it in proper working action.
can't get the pluses to turn to minuses but to be honest i don't care.

oLE


Yes you do....

See this?
..............
node1.src = (/folderopen/.test(node1.src)) ?
node1.src.replace(/folderopen/, 'folder') :
node1.src.replace(/folder/, 'folderopen');
..............

It's what switches the icon's src. Obviously, it's set up for that demo,
with its folder images ('folder.gif', 'folderopen.gif'). You'll need to
change it for those new pix:

node1.src = (/plus/.test(node1.src)) ?
node1.src.replace(/plus/, 'minus') :
node1.src.replace(/minus/, 'plus');

Just guessing that the other image is
'http://www.olespace.com/gfx/minus.gif'. Also - this CSS should be...

.preload {
background-image: url(http://www.olespace.com/gfx/minus.gif);
}

...as it's designed solely to preload the alternate image. hth

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 23 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.