Stäng föregående div när en ny öppnas.

Jag arbetar med ett javascript just nu och känner att jag är lite utanför mitt kunskapsområde, så därför hoppas jag på lite hjälp här.

Jag använder ett javascript som som togglar fram en div. Jag vill kunna använda scriptet så att när en ny div togglas fram så ska den gamla diven stängas. Den gamla diven får gärna stängas först.

Javascriptet ser ut så här.

var timerlen = 5;
var slideAniLen = 250;

var timerID = new Array();
var startTime = new Array();
var obj = new Array();
var endHeight = new Array();
var moving = new Array();
var dir = new Array();

function slidedown(objname){
        if(moving[objname])
                return;

        if(document.getElementById(objname).style.display != "none")
                return; // cannot slide down something that is already visible

        moving[objname] = true;
        dir[objname] = "down";
        startslide(objname);
}

function slideup(objname){
        if(moving[objname])
                return;

        if(document.getElementById(objname).style.display == "none")
                return; // cannot slide up something that is already hidden

        moving[objname] = true;
        dir[objname] = "up";
        startslide(objname);
}

function startslide(objname){
        obj[objname] = document.getElementById(objname);

        endHeight[objname] = parseInt(obj[objname].style.height);
        startTime[objname] = (new Date()).getTime();

        if(dir[objname] == "down"){
                obj[objname].style.height = "1px";
        }

        obj[objname].style.display = "inline";

        timerID[objname] = setInterval('slidetick(\'' + objname + '\');',timerlen);
}

function slidetick(objname){
        var elapsed = (new Date()).getTime() - startTime[objname];

        if (elapsed > slideAniLen)
                endSlide(objname)
        else {
                var d =Math.round(elapsed / slideAniLen * endHeight[objname]);
                if(dir[objname] == "up")
                        d = endHeight[objname] - d;

                obj[objname].style.height = d + "px";
        }

        return;
}

function endSlide(objname){
        clearInterval(timerID[objname]);

        if(dir[objname] == "up")
                obj[objname].style.display = "none";

        obj[objname].style.height = endHeight[objname] + "px";

        delete(moving[objname]);
        delete(timerID[objname]);
        delete(startTime[objname]);
        delete(endHeight[objname]);
        delete(obj[objname]);
        delete(dir[objname]);

        return;
}

function toggleSlide(objname){
  if(document.getElementById(objname).style.display == "none"){
    // div is hidden, so let's slide down
    slidedown(objname);
  }else{
    // div is not hidden, so slide up
    slideup(objname);
  }
  
}

HTML-Koden ser ur så här (utdrag.)

<Div id="left" style="display:none; overflow:hidden;position:fixed; left:10px; bottom:10px; background-color:#fff; border:2px solid #000; height:150px; width:400px; border-radius:0px 25px; padding:6px;"></Div>

<Div id="middle" style="display:none; overflow:hidden; height:150px; position:fixed;left:435px; bottom:10px; background-color:#fff; border:2px solid #000;width:400px; border-top-left-radius:15px; border-top-right-radius:15px; padding:6px;">Våtdräkt 2 </Div>

<Div id="right" style="display:none; overflow:hidden; 	position:fixed; left:860px; bottom:10px; background-color:#fff; border:2px solid #000; height:150px;width:400px; border-radius:25px 0px; padding:6px;"> Våtdräkt 3 </Div>

<td><a href="javascript:;" onmousedown="toggleSlide('left');"><img src="bilder/våtdräkt1.png" name="våtdräkt" onMouseOver="over(1)" onMouseOut="out(1)"></a></td>

      <td><a href="javascript:;" onmousedown="toggleSlide('middle');"><img src="bilder/historia1.png" name="historia" onMouseOver="over(2)" onMouseOut="out(2)"></a></td>

      <td><a href="javascript:;" onmousedown="toggleSlide('right');"><img src="bilder/retailers1.png" name="retailers" onMouseOver="over(3)" onMouseOut="out(3)"></a></td>