1. First create your mainbox and put an id of anything, I like to id my mainbox as "content" [quote]<div id="content">this is your mainbox</div>[/quote] 2. Then create as many hidden boxes as you want. [quote]<div id="comments" class="hide">blah blah</div> <div id="friends" class="hide">blah blah</div> <div id="links" class="hide">blah blah</div>[/quote] 3. Since I put their class as "hide" so in my internal CSS will have this code [quote]<style> div.hide { display: none } </style>[/quote] 4. Then put this in your Head section of your HTML [quote]<script> function tab(id) { document.getElementById('[b]content[/b]').innerHTML = document.getElementById(id).innerHTML } </script>[/quote] As you can see, inside the getElemendById('content') is the mainbox' id "content" 5. Then as for your links that will open or show or display the hidden boxes, use this pattern [quote]<a href="javascript:void(0)" onClick="tab('comments')">Show Comments</a> <a href="javascript:void(0)" onClick="tab('friends')">Show Comments</a> <a href="javascript:void(0)" onClick="tab('links')">Show Comments</a>[/quote] As you have notice, inside the tab('') is the hidden boxes' id. This corresponds what hidden boxes should be displayed if the link has been clicked.