# Need help adding fadein effect

**URL:** <https://forum.kirupa.com/t/need-help-adding-fadein-effect/319046>\
**Category:** Uncategorized\
**Created:** [February 7, 2011, 5:27pm UTC](https://forum.kirupa.com/t/need-help-adding-fadein-effect/319046 "2011-02-07T17:27:15Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![society](https://avatars.discourse-cdn.com/v4/letter/s/7cd45c/32.png) [@society](https://forum.kirupa.com/u/society)\
**Post date:** [February 7, 2011, 5:27pm UTC](https://forum.kirupa.com/t/need-help-adding-fadein-effect/319046/1 "2011-02-07T17:27:15Z")

</div>

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

I have a personal website, currently in development, located at: [http://www.jesselang.ca](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.

```auto
<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:

```auto
<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:

```auto
<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:

```auto
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://www.jesselang.ca)  
[http://jesselang.ca/files/style.css](http://jesselang.ca/files/style.css)

I’d very much appreciate the help.

Thank you in advance.  
\*j