Show/Hide table row

Aly · Jan 17, 2006

I am building a site that sells 3 standard packages and one custom package.
On the package selection page, I want the following:

Upon loading the page, I want the package selections (Basic, Standard,
Advanced, and Custom) to be visible, as well as an Email field and Payment
Method field.

I want nothing to happen when Basic, Standard, or Advanced are clicked. When
Custom is clicked (radio buttons for all), I want the custom options to
appear. If Basic, Standard, or Advanced are chosen again, I want the custom
options to disappear.

I have found a few different codes, but none of them do exactly what I am
looking for. I have seen it done, and tried to copy the code, but it didn't
work. I'm assuming there was something in a .js file that affected it.

If anyone could help, I would be greatly appreciative.

Aly

Aly · Jan 17, 2006

Following up on myself...

I have found one script that almost does what I want. However, I'm unsure
how to make it work for more than 2 options. Here is the basic page html
including the script so that someone may be able to help me.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
function ref(object)
{
if (document.getElementById)
{
return document.getElementById(object);
}
else if (document.all)
{
return eval('document.all.' + object);
}
else
{
return false;
}
}

function expand(object)
{
var object = ref(object);

if( !object.style )
{
return false;
}
else
{
object.style.display = '';
}

if (window.event)
{
window.event.cancelBubble = true;
}
}

function contract(object)
{
var object = ref(object);

if( !object.style )
{
return false;
}
else
{
object.style.display = 'none';
}

if (window.event)
{
window.event.cancelBubble = true;
}
}

function toggle(object)
{
object = ref(object);
if( !object.style )
{
return false;
}

if( object.style.display == 'none' )
{
object.style.display = '';
}
else
{
object.style.display = 'none';
}
}
</script>

</head>

<body>
<table width="100%" border="1" cellpadding="5" cellspacing="0"
bordercolor="#000000">
<tr>
<td bgcolor="#CCCCCC">
Hide Extra Content
<select name="select" onchange="toggle('morestuff'); return false;">
<option value="Yes" selected>Yes</option>
<option value="No">No</option>
</select></td>
</tr>
<tr>
<td bgcolor="#CCCCCC">Here is some content that shows. </td>
</tr>
<tbody id="morestuff" style="display: none">
<tr>
<td bgcolor="#33FF00"><p>This is hidden content</p>
</td>
</tr>
<tr>
<td bgcolor="#FFFF00">This is hidden content </td>
</tr>
<tr>
<td bgcolor="#FF66CC">This is hidden content </td>
</tr>
</tbody>
<tr>
<td bgcolor="#CCCCCC">Here is more content that shows. </td>
</tr>
</table>
</body>
</html>

Michael Winter · Jan 19, 2006

On 17/01/2006 18:45, Aly wrote:

[snip]

Upon loading the page, I want the package selections (Basic, Standard,
Advanced, and Custom) to be visible, as well as an Email field and Payment
Method field.

I want nothing to happen when Basic, Standard, or Advanced are clicked. When
Custom is clicked (radio buttons for all), I want the custom options to
appear. If Basic, Standard, or Advanced are chosen again, I want the custom
options to disappear.

Could you please post a link to the document as it stands now. It would
be much easier to describe a solution if we can see precisely what
markup will be involved (especially if changes to that markup are
necessary).

[snip]

Mike

Aly · Jan 19, 2006

Michael Winter said:
Could you please post a link to the document as it stands now. It would be
much easier to describe a solution if we can see precisely what markup
will be involved (especially if changes to that markup are necessary).

Actually, it's not necessary

I managed to figure it out on my own, and it
now works marvelously

Thanks, though!

Aly

Show/Hide HTML Table Columns using SELECT option	1	Nov 9, 2020
Show/hide table	2	Oct 25, 2005
show/hide a table row	9	Dec 13, 2004
show/hide text, but more...	4	Apr 28, 2007
Show/Hide text field	7	Jun 26, 2006
Show / Hide Table Rows	2	Oct 20, 2003
Swap/restore image while show/hide divs	4	Jan 26, 2006
Dynamically show/hide gridview footer?	0	Oct 23, 2007

Show/Hide table row

Aly

Aly

Michael Winter

Aly

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads