slide down / slide up div container
i have paid a freelance coder to build this code for my website and promised me with a good quality work and i ended up with this code that iam not happy with, its too long and doesnt look efficient way to achieve what i wanted. i am sure there is a better way to do this. any help is much appreciated.

here is my code:

//	begin top page slide

var OpenedPage;
function load(url, target) {
document.getElementById(target).innerHTML = '<h1>loading ...</h1>';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if (req != undefined) {
req.onreadystatechange = function() {loadDone(url, target);};
req.open("GET", url, true);
req.send("");
}
}

function loadDone(url, target) {
if (req.readyState == 4) { // only if req is "loaded"
if (req.status == 200) { // only if "OK"
document.getElementById(target).innerHTML = "<table width='100%'><tr><td width='90%'> </td><td align='right'><a href='#' onClick='unload" + target + "(); return false;'>close</a></td></tr></table>" + req.responseText;
	TabbedContent.init();
	
	} else {
document.getElementById(target).innerHTML="Error:\n"+ req.status + "\n" +req.statusText;
}
}
}



function unload()
{
if(OpenedPage=="divsignin")
{
unloaddivsignin();
}
if(OpenedPage=="content")
{
unloadcontent();
}
if(OpenedPage=="divHowto")
{
unloaddivHowto();
}
if(OpenedPage=="divHelp")
{
unloaddivHelp();
}
}
//<![CDATA[
function ShowHidedivsignin(){
unload();
OpenedPage="divsignin";
load("../slogin.php","divsignin");
$("#divsignin").animate({"height": "toggle"}, { duration: 800 });
}

function unloaddivsignin(){
OpenedPage="";
$("#divsignin").animate({"height": "toggle"}, { duration: 800 });
}

function ShowHidecontent(){
unload();
OpenedPage="content";
load("register.html","content");
$("#content").animate({"height": "toggle"}, { duration: 800 });
}

function unloadcontent(){
OpenedPage="";
$("#content").animate({"height": "toggle"}, { duration: 800 });
}

function ShowHidedivHowto(){
unload();
OpenedPage="divHowto";
load("../howto.php","divHowto");
$("#divHowto").animate({"height": "toggle"}, { duration: 800 });
}

function unloaddivHowto(){
OpenedPage="";
$("#divHowto").animate({"height": "toggle"}, { duration: 800 });
}

function ShowHidedivHelp(){
unload();
OpenedPage="divHelp";
load("help.html","divHelp");
$("#divHelp").animate({"height": "toggle"}, { duration: 800 });
}

function unloaddivHelp(){
OpenedPage="";
$("#divHelp").animate({"height": "toggle"}, { duration: 800 });
}
//]]>


the markup:


<html>
<header>
</header>
<body>
<div id="divsignin" style="display:none;width:auto"> </div>
<div id="content" style="display:none;width:auto"> </div>
<div id="divHowto" style="display:none;width:auto"> </div>
<div id="divHelp" style="display:none;width:auto"> </div>

<div class="container">
<div id="header"> </div>
<div id="body">
<a  onclick="ShowHidedivsignin(); return false;" href="#"> div signin </a>
...
...
...

</div>
</div
</body>
</html>

  
slide down / slide up div container
===

i have paid a freelance coder to build this code for my website and promised me with a good quality work and i ended up with this code that iam not happy with, its too long and doesnt look efficient way to achieve what i wanted. i am sure there is a better way to do this. any help is much appreciated.

here is my code:

//	begin top page slide

var OpenedPage;
function load(url, target) {
document.getElementById(target).innerHTML = '<h1>loading ...</h1>';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if (req != undefined) {
req.onreadystatechange = function() {loadDone(url, target);};
req.open("GET", url, true);
req.send("");
}
}

function loadDone(url, target) {
if (req.readyState == 4) { // only if req is "loaded"
if (req.status == 200) { // only if "OK"
document.getElementById(target).innerHTML = "<table width='100%'><tr><td width='90%'> </td><td align='right'><a href='#' onClick='unload" + target + "(); return false;'>close</a></td></tr></table>" + req.responseText;
	TabbedContent.init();
	
	} else {
document.getElementById(target).innerHTML="Error:\n"+ req.status + "\n" +req.statusText;
}
}
}



function unload()
{
if(OpenedPage=="divsignin")
{
unloaddivsignin();
}
if(OpenedPage=="content")
{
unloadcontent();
}
if(OpenedPage=="divHowto")
{
unloaddivHowto();
}
if(OpenedPage=="divHelp")
{
unloaddivHelp();
}
}
//<![CDATA[
function ShowHidedivsignin(){
unload();
OpenedPage="divsignin";
load("../slogin.php","divsignin");
$("#divsignin").animate({"height": "toggle"}, { duration: 800 });
}

function unloaddivsignin(){
OpenedPage="";
$("#divsignin").animate({"height": "toggle"}, { duration: 800 });
}

function ShowHidecontent(){
unload();
OpenedPage="content";
load("register.html","content");
$("#content").animate({"height": "toggle"}, { duration: 800 });
}

function unloadcontent(){
OpenedPage="";
$("#content").animate({"height": "toggle"}, { duration: 800 });
}

function ShowHidedivHowto(){
unload();
OpenedPage="divHowto";
load("../howto.php","divHowto");
$("#divHowto").animate({"height": "toggle"}, { duration: 800 });
}

function unloaddivHowto(){
OpenedPage="";
$("#divHowto").animate({"height": "toggle"}, { duration: 800 });
}

function ShowHidedivHelp(){
unload();
OpenedPage="divHelp";
load("help.html","divHelp");
$("#divHelp").animate({"height": "toggle"}, { duration: 800 });
}

function unloaddivHelp(){
OpenedPage="";
$("#divHelp").animate({"height": "toggle"}, { duration: 800 });
}
//]]>


the markup:


<html>
<header>
</header>
<body>
<div id="divsignin" style="display:none;width:auto"> </div>
<div id="content" style="display:none;width:auto"> </div>
<div id="divHowto" style="display:none;width:auto"> </div>
<div id="divHelp" style="display:none;width:auto"> </div>

<div class="container">
<div id="header"> </div>
<div id="body">
<a  onclick="ShowHidedivsignin(); return false;" href="#"> div signin </a>
...
...
...

</div>
</div
</body>
</html>

  