...

View Full Version : Swapping Contents of DIV onClick



elchoco
06-28-2006, 04:44 PM
I have a (seemingly) simple task. I would like to swap out the contents of a div using the onClick() function. I can also use php, if need be. Basically I'd like to mimic what Target.com has done Here (http://www.target.com/gp/detail.html/ref=sc_iw_r_1_0/602-6763558-9486204?%5Fencoding=UTF8&asin=B000CF61DI). The description features... tabs are very nice. it looks as though they are using a javascript function but I am not good enough to figure it out. Too new to js I guess. ANY help would be greatly appreciated.

This is what I have so far (the only code that has worked, even a little):



<script type="text/javascript">
function changeDesc(desc) {
var obj = document.getElementById("special");

var description = ("This is a detail");
var feature = ("These are the features");
obj.firstChild.nodeValue = description;


}

</script>

</head>

<body>

<a href="" onclick="changeDesc('feature'); return false;">Description</a>
<a href="" onclick="changeDesc(); return false;">Feature</a>
<div id="special">
Whatever is in here should change?

</div>


This frustrated musician thanks you in advance.

elchoco
06-28-2006, 06:10 PM
I've made minor progress but I'm having trouble still... I'd like to have a table set to obj.innerHTML for features... is this possible? What I have now doesn't do it.

Thanks again for any help or guidance



<script type="text/javascript" language="javascript">
function changeDesc(desc)
{ var obj =
document.getElementById("special");

if (desc == 'feature')
{
obj.innerHTML = document.getElementById("feature");
}
else if (desc == 'description')
{
obj.innerHTML = "This is a description";
}
else
{
obj.innerHTML = "You have clicked other";
}

}

</script>

</head>

<body>
<table>
<tr>
<td width="100">
<a href="" onclick="changeDesc('description'); return false;">Description</a>
</td>
<td width="100">
<a href="" onclick="changeDesc('feature'); return false;">Feature</a>
</td>
<td width="100">
<a href="" onclick="changeDesc('other'); return false;">Other</a>
</td>
</tr>
<tr>
<td id="special" colspan="3">
<div id="description">
Description in the DIV
</div>
<div id="feature">
Feature in the DIV
</div>
</td>
</tr>
</table>
</body>

Mr J
06-28-2006, 07:43 PM
Do you mean something on these lines?


<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY>
<script type="text/javascript" language="javascript">

function changeDesc(desc){
var obj = document.getElementById("special");

if (desc == 'feature'){
obj.innerHTML = "This is a feature"
}
else if (desc == 'description'){
obj.innerHTML = "This is a description";
}
else{
obj.innerHTML = "You have clicked other";
}

}

</script>
</HEAD>
<BODY>

<table>
<tr>
<td width="100">
<a href="" onclick="changeDesc('description'); return false;">Description</a>
</td>
<td width="100">
<a href="" onclick="changeDesc('feature'); return false;">Feature</a>
</td>
<td width="100">
<a href="" onclick="changeDesc('other'); return false;">Other</a>
</td>
</tr>
<tr>
<td id="special" colspan="3" valign="top" style="border:1px solid black;height:70px">
&nbsp;
</td>
</tr>
</table>

<div id="description" style="display:none">Description in the DIV</div>
<div id="feature" style="display:none">Feature in the DIV</div>

</BODY>
</HTML>

elchoco
06-28-2006, 08:17 PM
Yeah, that is what I meant. You are a wonderful man, Mr J.

Last question:
I wanted to put a table and a list inside of the feature obj.innerHTML (the way I have done)
For readability is there something I can do differently for the feature obj.innerHTML? As in carriage returns, it's hard to decipher at the moment.


<script type="text/javascript" language="javascript">

function changeDesc(desc){
var obj = document.getElementById("special");

if (desc == 'feature'){
obj.innerHTML = "<table><tr><td><ul><li>Feature #1</li><li>Feature #2</li><li>Feature #3</li></ul></td></tr><tr><td>Oh yeah this is totally what I was talking about</td></tr></table>";
}
else if (desc == 'description'){
obj.innerHTML = "This is a description = obj";
}
else{
obj.innerHTML = "You have clicked other = obj";
}

}

</script>

Mr J
06-28-2006, 11:12 PM
How about this?


<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script type="text/javascript" language="javascript">

function changeDesc(desc){
var obj = document.getElementById("special");

if (desc == 'feature'){

obj.innerHTML='<ul>'
obj.innerHTML+='<li>Feature #1</li>'
obj.innerHTML+='<li>Feature #2</li>'
obj.innerHTML+='<li>Feature #3</li>'
obj.innerHTML+='</ul>'

obj.innerHTML+='<br>Oh yeah this is totally what I was talking about'

}
else if (desc == 'description'){
obj.innerHTML = "This is a description = obj";
}
else{
obj.innerHTML = "You have clicked other = obj";
}

}

</script>

<style>

#special LI{
margin-left:10px;
}

</style>

</HEAD>
<BODY>

<table>
<tr>
<td width="100">
<a href="" onclick="changeDesc('description'); return false;">Description</a>
</td>
<td width="100">
<a href="" onclick="changeDesc('feature'); return false;">Feature</a>
</td>
<td width="100">
<a href="" onclick="changeDesc('other'); return false;">Other</a>
</td>
</tr>
<tr>
<td id="special" colspan="3" valign="top" style="border:1px solid black;height:70px">
&nbsp;
</td>
</tr>
</table>

</BODY>
</HTML>

elchoco
07-03-2006, 07:42 PM
That's much prettier, but a lot more code But I'll take what I can get! :) Thanks so much for all your time Mr J, you teh man.

Mr J
07-03-2006, 09:48 PM
You could go

obj.innerHTML='<ul><li>Feature #1</li><li>Feature #2</li><li>Feature #3</li></ul><br>Oh yeah this is totally what I was talking about"

for that particular line to make it shorter but my previous example is easier to read or as you put it, prettier :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum