I have a page at http://www.ratbum.com/test/cv/ which has a kind of tool tray in the bottom right.

I would like, when the white arrow is clicked, for the tray to move off the screen so that just the arrow is visible and then to return to its original position if the arrow is clicked again.

I got code for moving a div from http://www.vicsjavascripts.org.uk/Mo...oveElement.htm and I cannot figure out how mine's different and therefore wrong.

Additionally, I'd like the arrow to change direction when according to which way the div will slide.

I have attempted to use Safari's javascript debugging tools to no avail. Needless to say, I have searched the internet including this forum.

I have tried the following code:
Code:
function moveTray(){
	if(trayOpen){
		zxcReturn('styleswitcher');
		document.elementById("mvbutton").style.backgroundImage = "style/images/<.png";
	} else {
		zxcSlide('styleswitcher', 'H', -250, 1, 100);
		document.elementById("mvbutton").style.backgroundImage = "style/images/>.png";
	}
}
The code references the following:
Code:
//---------Code from http://www.vicsjavascripts.org.uk/MoveElement/MoveElement.htm
function zxcSlide(zxcid, zxchv, zxcpos, zxcinc, zxcspd) {
    zxc = document.getElementById(zxcid);
    if (!zxc) {
        return;
    }
    if (!zxc.obj && zxchv) {
        zxc.obj = new zxcAddFunctions(zxc);
        if (zxchv == 'H') {
            zxchv = 'HH';
        }
        if (zxchv == 'V') {
            zxchv = 'VV';
        }
    }
    if (zxc.obj && (zxchv == 'HH' || zxchv == 'VV')) {
        if (!zxcpos) {
            zxcpos = zxc.offsetWidth;
        }
        if (zxcpos > 0) {
            if (zxchv == 'HH') {
                zxc.obj.close = parseInt(zxc.style.left);
            }
            else {
                zxc.obj.close = parseInt(zxc.style.top);
            }
            zxc.obj.base = false;
            zxc.obj.down = false;
            zxc.obj.open = zxc.obj.close + zxcpos;
            zxc.obj.pos = zxc.obj.close;
        }
        else {
            if (zxchv == 'HH') {
                zxc.obj.open = parseInt(zxc.style.left);
            }
            if (zxchv == 'VV') {
                zxc.obj.open = parseInt(zxc.style.top);
            }
            zxc.obj.base = true;
            zxc.obj.down = true;
            zxc.obj.close = zxc.obj.open + zxcpos;
            zxc.obj.pos = zxc.obj.open;
        }
        zxc.obj.hv = zxchv;
        zxc.obj.z = zxc.obj.mobj.zIndex;
        if (!zxcinc) {
            zxcinc = 1;
        }
        if (zxcinc < 1) {
            zxcinc = 1;
        }
        if (!zxcspd) {
            zxcspd = 5;
        }
        if (zxcinc < 5) {
            zxcspd = 5;
        }
        zxc.obj.spd = zxcspd;
        zxc.obj.inc = zxcinc;
    }
    if (!zxc.obj) {
        return
    }
    clearTimeout(zxc.obj.to);
    if (zxc.obj.down) {
        zxc.obj.down = false;
        zxc.obj.mobj.zIndex = zxc.obj.z;
    }
    else {
        zxc.obj.down = true;
        zxc.obj.mobj.zIndex = zxc.obj.z + 1;
    }
    zxc.obj.auto();
}

function zxcAddFunctions(zxc) {
    this.mobj = zxc.style;
    this.ref = zxc.id;
    window[this.ref] = this;
    this.to = null;
    this.auto = zxcAuto;
    this.setto = zxcTimeOut;
}

function zxcAuto() {
    if (this.close < this.open && this.down) {
        this.pos += this.inc;
        if (this.pos > this.open) {
            this.pos = this.open;
        }
        if (this.hv.match('H')) {
            this.mobj.left = (this.pos) + 'px';
        }
        else {
            this.mobj.top = (this.pos) + 'px';
        }
    }
    if (this.pos > this.close && !this.down) {
        this.pos -= this.inc;
        if (this.pos < this.close) {
            this.pos = this.close;
        }
        if (this.hv.match('H')) {
            this.mobj.left = (this.pos) + 'px';
        }
        else {
            this.mobj.top = (this.pos) + 'px';
        }
    }
    this.setto('auto();', this.spd);
}

function zxcTimeOut(zxcf, zxcd) {
    this.to = setTimeout('window.' + this.ref + '.' + zxcf, zxcd);
}

function zxcReturn() {
    zxcargs = zxcReturn.arguments;
    for (zxc0 = 0; zxc0 < zxcargs.length; zxc0++) {
        zxcr = document.getElementById(zxcargs[zxc0]);
        if (zxcr.obj) {
            clearTimeout(zxcr.obj.to);
            zxcr.obj.down = zxcr.obj.base;
            zxcr.obj.auto();
        }
    }
}
Thanks in advance for all help.