how to show multi layer by each click and no hide,

[liesther2003]

Hi
i want to show mutli layer by each click, and when i click next layer the first layer should be still display, until maybe 3rd or 4th or 5th layer all are displayed, and at the end when i click somewhere (maybe image) then close all layer.

my code are here

[HTML]<script type="text/javascript">
var currlayerId = null;
function toglayer(id)
{
if(currlayerId) setDisplay(currlayerId, "none");
if(id)setDisplay(id, "block"); //block
currlayerId = id;
}

function setDisplay(id,value)
{
var elm = document.getElementById(id);
elm.style.display = value;
}
</script>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr class="header1">
<td width="83%">Business Foundation</td>
<td align="right" style="text-align: right" width="16%"><a href="#" onclick="toglayer('BF');return false;"><img border="0" src="image/errow%20down.jpg" width="13" height="14"></a></td>
</tr>
<tr>
<td class="oddrow" width="83%"><div id="BF" class="text" style="display:none">Description for business foundation</div></td>
<td class="oddrow" style="text-align: right" width="16%"></td>
</tr>
<tr>
<td class="header2" width="83%">Organization Setup</td>
<td class="header2" style="text-align: right" width="16%"><a href="#" onclick="toglayer('OS');return false;"><img border="0" src="image/errow%20down.jpg" width="13" height="14"></a></td>
</tr>
<tr>
<td colspan="2"><div id="OS" class="oddrow" style="display:none">description for organization setup</div></td>
</tr>

<tr>
<td class="header3" colspan="4">
Department</td>
<td style="text-align: right" class="header3" width="16%"><a href="#" onclick="toglayer(null)"><img border="0" src="image/errow%20up.jpg" width="13" height="14"></a></td>
</tr>[/HTML]

[acoder]

Please post all code using CODE tags.

I've moved your thread from the Articles section to the Forum section where it belongs and also removed "urgent" from the title.

Remove line 5 from your code to avoid hiding 'layers'.