need some help!

CSmith1128 · 09-05-2006, 05:15 AM

Alright. I need some help.
Im not sure if javascript is going to help me here, but hopefully someone could assist me.

Here's what i need...
- I need to display information in groups. For example, I have products that I want to show. I have the name of the product and then the details of the product.
- However, I want to show just the product name initially with a [+] next to the product name that they can click to see more information on the product.
- When they click the [+] I want the information to display below the product name without having to reload the page.

Can anyone help me get started/ direct me in the right direction?!
Thanks!

Chris

_Aerospace_Eng_ · 09-05-2006, 05:48 AM

So you will have the product info already loaded onto the page correct?

Code:

<!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>
<style type="text/css">
#description {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.9em;
}
a#more {
text-decoration:none;
color:#000;
display:block;
float:left;
width:2em;
text-align:center;
background-color:inherit;
outline:0;
}
a#more:hover {
color:#F00;
}
#moreinfo {
text-indent:2em;
}
</style>
<script type="text/javascript">
function showInfo()
{
	document.getElementById('moreinfo').style.display = (document.getElementById('moreinfo').style.display == 'none') ? 'block' : 'none';
	document.getElementById('more').childNodes[0].nodeValue = (document.getElementById('more').childNodes[0].nodeValue == '[+]') ? '[-]' : '[+]';
	return false;
}
window.onload = function()
{
	document.getElementById('moreinfo').style.display = 'none';
}
</script>
</head>
<body>
<div id="description"><a href="#" onclick="return showInfo()" id="more">[+]</a> This is a brief summary of the product.
	<div id="moreinfo">This is a longer summary of the product mentioned above.</div>
</div>
</body>
</html>

CSmith1128 · 09-06-2006, 03:12 AM

thats it! thanks!