iframe replacement with <div> tag

I'm creating a product page and I'd like to display a description of the product in the above header with an image when a user clicks on a product name and would like to do this with out reloading the whole page.  I'd basically like to use a product description page I have and display that in the top section.  Is there any way to do this with a div tag?  I'd rather not use iframe if possible.  So the page would have a list of products, the user would click on the product and refresh the description area above with out refreshing the whole page.
Who is Participating?
Here is how you do it using some unique ID for each product (say ProductID)...

<div id="ProductDescription_1001" style="display:none">
Product 1 Description with image
<div id="ProductDescription_1002" style="display:none">
Product 2 Description with image
and so on

<a href="#" onclick="ShowDescription(1001);return false;">Product Name 1</a><br>
<a href="#" onclick="ShowDescription(1002);return false;">Product Name 2</a><br>

and so on...

function ShowDescription(ProductID)
     var oDivs = document.getElementsByTagName("DIV");

     for (i = 0 ; i < oDivs.length ; i++)
          if (oDivs[i].id.indexOf("ProductDescription_") != -1)
              oDivs[i].style.display = "none";

     document.getElementById("ProductDescription_" + ProductID).style.display = "block";

if you want to use the product description page as is, the answer is no.   If you are willing to edit your page so that each product description is a cell within an array, the answer is yes.

<script type='text/javascript' src='prodDescription.js'></script>
<script type='text/javascript'>
function getDescription(ndx)
     document.getElementById('theDiv').innerHTML = descriptions[ndx];
<div id='theDiv'></div>
<a href="#" onclick="getDescription(0);return false;"><img .....></a>
<a href="#" onclick="getDescription(1);return false;"><img .....></a>
<a href="#" onclick="getDescription(2);return false;"><img .....></a>

tjhe prodDescription.js file should only contain the array:

var descriptions = new Array("Product 1 is extremely cheap", "product 2 is durable",.......):

Alternate method would be to use an associative array:

var descriptions = new Array();
descriptions["Compaq Presario"] = "blah, blah, blah";
descriptions["Atari 2600"] = "bleep, bleep, bleep"
the benefit of using such an array is that you could delete & add products without worrying about whether the array's sequence  has been messed up

<a href="#" onclick="getDescription('Atari 2600');return false;"><img .....></a>

the function would be same
The only problem in both cases is quotes.   If your description includes them, remember to escape them appropriately
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.