close one div when another opens

[thedesigndept]

I have a page with categories of images. When clicked, each image on the left opens a div with it's own gallery of thumbnails.

http://myspringslandscaping.com/portfolio.html

Right now, to close a div, the category image has to be clicked a second time. How can I set it so that when one div opens, the other closes automatically? The client wants only one category displayed at a time.

Any help would be appreciated.
Thanks!
Marita

[Old Pedant]

Ugh...you are using *ANCIENT* code.

That bit with layers only ever applied to Netscape 4 browser. And the need for document.all disappeared when MSIE 4 died. So that code is roughly 11 years old.

I'm going to try coding this "blind". It would be easier to write if we changed some of the HTML on your page (and I really think it should be changed...you have all those <table>s in there all the time, even though their contents aren't being displayed), but let's start by just changing the JavaScript.

See if this works:

<!-- use the correct script tag -->
<script type="text/javascript">
// A list of all the affected <div>s by id
var layerIds = ["com","irr","patios","ponds","res","walls"];

function toggleLayer( which )
{
    for ( var d = 0; d < layerIds.length; ++ d )
    {
        var id = layerIds[d];
        var div = document.getElementById(id);
        if ( id == which ) 
        {
            div.style.display = ( div.style.display == "block" ) ? "none" : "block";
        } else {
            div.style.display = "none";
        }
    }
}
</script>