hi all,

I'm creating a personal website and having some coding issues. I'm almost complete but just need a bit of code to finish it off.

I'm making an online portfolio with three links "About me, Portfolio and resume". So far when one of the links is clicked, a div fades in. Click again and it fades out. I have three divs stacked on top of eachother using z-index.

What I'm trying to do is only display one div at a time.

For example, when I click the 'About me' link, the 'About me' div fades in. Then when I click the 'Portfolio' link, the 'About me' div fades out and the 'Portfolio' div fades in.

Below is my code:

<html>
<head>
<title>mainpage</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="css/menulayout.css" rel="stylesheet" type="text/css">
<link href="css/aboutmelayout.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
background-color: #000;
}

</style>
<link href="css/content.css" rel="stylesheet" type="text/css">
<link href="css/portfoliolayout.css" rel="stylesheet" type="text/css">
<link href="css/aboutmelayout.css" rel="stylesheet" type="text/css">
<link href="css/resumelayout.css" rel="stylesheet" type="text/css">
<link href="css/links.css" rel="stylesheet" type="text/css">
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<link href="file:///Macintosh HD/Users/MuFioZo/Portfolio/MattXDesign/Site/css/flashblock.css" rel="stylesheet" type="text/css">
</head>


</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function toggleDiv(divId) {
$("#"+divId).fadeToggle();
}
</script>


<body onLoad="MM_preloadImages('images/aboutroll.jpg','images/portfolioroll.jpg','images/resumeroll.jpg','images/emailroll.jpg')">

<!-- Save for Web Slices (mainpage.psd) -->
<div id="content" table class="center">

<div id="menulayout">
<table width="531" height="651" border="0" cellpadding="0" cellspacing="0" id="Table_01">
<tr>

<td colspan="7">
<img src="images/mainpage_01.jpg" width="530" height="159" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="159" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="images/mainpage_02.jpg" width="323" height="144" alt=""></td>
<td colspan="4">
<img src="images/obession.jpg" width="207" height="10" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td colspan="4" rowspan="2">
<img src="images/mainpage_04.jpg" width="207" height="142" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="134" alt=""></td>
</tr>
<tr>
<td rowspan="8">
<img src="images/mainpage_05.jpg" width="145" height="347" alt=""></td>
<td rowspan="7"><div class="flashblock">
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" width="158" height="148" id="FlashID" title="Orbanimation">
<param name="movie" value="images/OrbAnim.swf">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="6.0.65.0">
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf">
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="images/OrbAnim.swf" width="158" height="148">
<!--<![endif]-->
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="6.0.65.0">
<param name="expressinstall" value="Scripts/expressInstall.swf">
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div></td>
<td rowspan="8">
<img src="images/mainpage_07.jpg" width="20" height="347" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="8" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="4">
<img src="images/mainpage_08.jpg" width="125" height="91" alt=""></td>
<td><a href="#" onClick="javascript:toggleDiv('aboutmelayout');" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('aboutme','','images/aboutroll.jpg',1)"><img src="images/about.jpg" name="aboutme" width="78" height="13" border="0"></a></a></td>
<td rowspan="7">
<img src="images/mainpage_10.jpg" width="4" height="339" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="13" alt=""></td>
</tr>
<tr>
<td><a href="#" onClick="javascript:toggleDiv('portfoliolayout');" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('portfolio','','images/portfolioroll.jpg',1)"><img src="images/portfolio.jpg" name="portfolio" width="78" height="15" border="0"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
<td><a href="#" onClick="javascript:toggleDiv('resumelayout');" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('resume','','images/resumeroll.jpg',1)"><img src="images/resume.jpg" name="resume" width="78" height="14" border="0"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="14" alt=""></td>
</tr>
<tr>
<td>
<img src="images/mainpage_13.jpg" width="78" height="49" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="49" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/mainpage_14.jpg" width="104" height="248" alt=""></td>
<td colspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('email','','images/emailroll.jpg',1)"><img src="images/email.jpg" name="email" width="99" height="18" border="0"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="18" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/mainpage_16.jpg" width="99" height="230" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="31" alt=""></td>
</tr>
<tr>
<td>
<img src="images/mainpage_17.jpg" width="158" height="199" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="199" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="145" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="158" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="20" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="104" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="21" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="78" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="4" height="1" alt=""></td>
<td></td>
</tr>
</table>
</div>

<div id="aboutmelayout" style="display:none;">
<table width="470" height="650" border="0" cellpadding="0" cellspacing="0" id="Table_">
</table>
</div>

<div id="portfoliolayout" style="display:none;">
<table id="Table_01" width="1001" height="651" border="0" cellpadding="0" cellspacing="0">
</table>
</div>

<div id="resumelayout" style="display:none">
<table id="Table_2" width="1000" height="650" border="0" cellpadding="0" cellspacing="0">
</table>
</div>
</div>


<!-- End Save for Web Slices -->

<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>

</html>