View Full Version : Make a div hidden while showing another div

01-29-2005, 06:25 AM
If you check this page (http://users.igl.net/nite1x/yghelp2.html) out you should see a header, a nav menu on the left and and scrollable box on the right. If you scroll down to the bottom of the box you should see it doesn't contain much text. If you click a "link" in the nav menu and look at the box again you should see two things have happened. One, the scroll bar (the one you drag up and down) should be smaller; and two, when you scroll down there should be more text.
I wrapped my content in divs and gave them each an ID. I then used a modified version of the script below 237 to hide/show each div when the corresponding "link" in the nav menu was clicked.

<title>Toggle hide/show of an element: IE4, IE5, NS6</title>
<script language="javascript1.2" type="text/javascript">
function toggle(id){

dom = document.getElementById ? 1 : 0;
ie4 = (document.all && !dom) ? 1 : 0;
opera = (navigator.userAgent.indexOf('Opera')!=-1) ? 1 : 0;
supported = ((dom||ie4) && !(opera)) ? 1 : 0;


if (dom && !document.all)
document.all = document.getElementsByTagName("*")

obj = (dom) ? document.getElementById(id) : document.all(id)




<style type="text/css">
.myStyle { position:absolute; left: 318px; top:15px; background-color:#cccccc }



<div id="layermenu" class="myStyle" onmouseover="toggle('layermenu')" onmouseout="toggle('layermenu')">Text in here will disappear onmouseover and re-appear onmouseout</div>

What I am trying to figure out is, when a "link" is clicked how to hide the content that is currently showing and at the same time show the content that corresponds with the "link".


01-29-2005, 07:08 AM
something like this http://www.alistapart.com/articles/eatcake/ ?