Add a sliding effect to my Showhide div function

1

Trying to add a sliding or fading in/out effect to the showhide div function i have already… any help would be appreciated.

<script language="javascript">
function byId(id) 
{ return document.getElementById ? document.getElementById(id) : document.all[id]; } 
var prevLink = ""; function changeActiveStates(ele) { if (prevLink) byId(prevLink).className 
= ""; ele.className = 'activate'; prevLink = ele.id; } 
function showhide(divid, state){
document.getElementById(divid).style.display=state
}
          </script>   
    
 
<style type="text/css">

#apContact {
	position:absolute;
	width:100%;
	height:1%;
	z-index:200;
	right: 0px;
	bottom: 0px;
	font-family: jh_font, Arial, Helvetica, sans-serif;
	color: #619F33;
	text-align: left;
	vertical-align: baseline;
	display: none;
	background-color: rgba(0,0,0,0.75);
	/*background-image: url(images/line.jpg);
	background-repeat: repeat-x;
	background-position: top;*/
}

#apAbout {
	position:absolute;
	width:100%;
	height:1%;
	z-index:200;
	right: 0px;
	bottom: 0px;
	font-family: jh_font, Arial, Helvetica, sans-serif;
	color: #619F33;
	text-align: default;
	vertical-align: baseline;
	display: none;
	background-color: rgba(0,0,0,0.75);
}
	
		
	</style>
</head>

<body>

<div id="apDiv4"><a href="#" onclick="changeActiveStates(this);showhide('apAbout', 'table');showhide('apContact', 'none');showhide('apVideo', 'none');showhide('apResume', 'none');return false">about</a><br />
  <a href="#" onclick="changeActiveStates(this);showhide('apContact', 'table');showhide('apAbout', 'none');showhide('apVideo', 'none');showhide('apResume', 'none');return false">contact</a></div>


<div id="apContact"> 
  <table width="100%" border="0" cellspacing="25" cellpadding="0">
  <tr>
    <td><div align="left">COPY HERE</div></td>
    <td><div align="right"><a href="#" onclick="showhide('apContact', 'none'); return false" >Close</a></div></td>
  </tr>
  <tr>
    <td><div align="left">COPY HERE</div></td>
    <td><div align="right"></div></td>
  </tr>
  <tr>
    <td><div align="left">COPY HERE</div></td>
    <td><div align="right"></div></td>
  </tr>
</table>
  <p></p> 
</div>


<div id="apAbout"> 
  <table width="100%" border="0" cellspacing="25" cellpadding="0">
  <tr>
    <td width="770"><div align="left">COPY HERE</div></td>
    <td><div align="right"><a href="#" onclick="showhide('apAbout', 'none'); return false" >Close</a></div></td>
  </tr>
  <tr>
    <td><div align="left">COPY HERE</div></td>
    <td><div align="right"></div></td>
  </tr>
  <tr>
    <td><div align="left">COPY HERE</div></td>
    <td><div align="right"></div></td>
  </tr>
</table>
  <p></p> 
</div>