Need help adding fadein effect

1

Greetings everyone; Jesse here. Long time reader, first time poster. :slight_smile:

I have a personal website, currently in development, located at: http://www.jesselang.ca

If you click the right-facing arrows along the right side you’ll open a side-bar column, clicking a left-facing arrow will then close the side-bar.

This functionality is “OK” at best.

What I would like to see is clicking the right-facing arrow causes the current sidebar to fade-in, and simultaneously have the arrow flip to a left-facing icon; the idea being to add a toggle function to the arrows.

The code I’m using at the moment is shown below, this string works for me because it only allows 1 sidebar container to be displayed at a time… which is ideal.

<script type="text/javascript">
	lastone='empty'; 
	function showIt(lyr) 
	{if (lastone!='empty') lastone.style.display='none'; 
	lastone=document.getElementById(lyr); 
	lastone.style.display='block';}
</script>

The respective html looks something like this:

<a onclick="javascript:showIt('interestcontainer')" class="arrow"><span>show interests sidebar</span></a>

The coresponding html for the container to display looks like this. This code also shows the “hide container” button:

<div id="interestcontainer" style='display:none;'>
        <h4>interests<a onclick="interestcontainer.style.display='none';" class="back"><span>back</span></a></h4>

And the CSS looks like this:

a.arrow{
	display:block;
	float:right;
	background:url(../images/ico-arrow.gif) top no-repeat;
	text-decoration:none;
	overflow:hidden;
	width:13px; 
	height:11px;
	margin-left:3px;}

Would it be asking to much to have someone help me achieve the following functionality?

-load page with all side containers hidden
-display only 1 side container at a time
-fadein and fadeout effects
-same button displays and hides
-button swaps images for displat/hide commands

Again, my code can be seen at:
http://www.jesselang.ca
http://jesselang.ca/files/style.css

I’d very much appreciate the help.

Thank you in advance.
*j