my three tabbed javascript nightmare

alright. what im trying to do is best describe by showing what im trying to do. so take a gander at
your looking to look at there product highlights, product views, product details.

http://www.alienware.com/GearShop_Pages/Gear_Shop_Detail.aspx?ItemId=12796

notice how its like a tabbed screen. click on one it shows that info, click on another it shows that layer.

so what Ive got so far is this

my javascript

function handleClick(id) {
      var obj = "";      

            // Check browser compatibility
            if(document.getElementById)
                  obj = document.getElementById(id);
            else if(document.all)
                  obj = document.all[id];
            else if(document.layers)
                  obj = document.layers[id];
            else
                  return 1;

            if (!obj) {
                  return 1;
            }
            else if (obj.style)
            {                  
                  obj.style.display = ( obj.style.display != "none" ) ? "none" : "";
            }
            else
            {
                  obj.visibility = "show";
            }
}


and on my front end i have this


<script language="javascript" src="/ig/includes/IGDtabber.js"></script>
   <tr>
    <td colspan="2" class="main"><a href="javascript:handleClick('one');">my first<a>
      <a href="javascript:handleClick('two');"> my second</a>
      <a href="javascript:handleClick('three');">my third</a></td>
  </tr>
  <tr>
    <td id="one" style="display: none" colspan="2" class="plainbox-description"><?php echo stripslashes($grabOne); ?></td>
    <td id="two" style="display: none" colspan="2" class="plainbox-description"><?php echo stripslashes($grabTwo); ?></td>
    <td id="three" style="display: none" colspan="2" class="plainbox-description"><?php echo stripslashes($grabThree); ?></td>
  </tr>

now that works, but as you can see it doesnt work the way I want it two, but the test was complete. then I thought to myself and said "self, how can i get this to display in one datacell, and just have them overlay themselves on top of each other.

any suggestions?
redcableAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

cLFlaVACommented:
What do you mean it doesn't work the way you want it to?
  If you want it to quickly display a different section of content without reloading the page (?) then I suggest placing the three different sections into <div>s and setting the display style of each one programatically.
0
redcableAuthor Commented:
it works without reloading the page, i mean to say it doesnt display the way i want it too. even with divs, if i click my first link it displays my div, if i click my second link it displays my second info below the first div. i want it to replace the first div, as in I want each one to display on top of the other. just like in the example i gave at

 http://www.alienware.com/GearShop_Pages/Gear_Shop_Detail.aspx?ItemId=12796

notice how its like a tabbed screen. click on one it shows that info, click on another it shows that layer.
0
cLFlaVACommented:
Ahh, I see what you're saying.  Try this simplified function, let me know if it works for you.


function handleClick(id) {
    var o = new Array('one', 'two', 'three');
    for (var i = 0; i < o.length; i++) {
        obj = document.getElementById(o[i]);
        if (id == o[i]) { obj.style.display = ''; }
        else { obj.style.display = 'none'; }
    }
}
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

redcableAuthor Commented:
works like a dream, if you have time can you walk me through whats going in in this script.

this is what i understand so far.

0
cLFlaVACommented:
ok, no prob.

The script acts as follows:

// pass this function the id of the cell that you'd like to display
function handleClick(id) {

    // fill an array with the three possible id's.
    var o = new Array('one', 'two', 'three');

    // loop through the three strings inside the array
    for (var i = 0; i < o.length; i++) {

        // get the object with the appropriate id
        obj = document.getElementById(o[i]);

        // if this array position's id is the one that was passed in, display it
        if (id == o[i]) { obj.style.display = ''; }

        // otherwise, hide it
        else { obj.style.display = 'none'; }
    }
}

The function you had wasn't hiding any objects, just displaying them...
0
redcableAuthor Commented:
sweet man thanks much
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

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.