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. 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):

Code:

<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

Code:

<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?

PHP Code:


			
<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.

PHP Code:


			
<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?

PHP Code:


			
<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