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(curr layerId, "none");
if(id)setDispla y(id, "block"); //block
currlayerId = id;
}

function setDisplay(id,v alue)
{
var elm = document.getEle mentById(id);
elm.style.displ ay = value;
}
</script>
<table border="0" width="100%" cellspacing="0" cellpadding="0" >
<tr class="header1" >
<td width="83%">Bus iness Foundation</td>
<td align="right" style="text-align: right" width="16%"><a href="#" onclick="toglay er('BF');return false;"><img border="0" src="image/errow%20down.jp g" width="13" height="14"></a></td>
</tr>
<tr>
<td class="oddrow" width="83%"><di v id="BF" class="text" style="display: none">Descripti on for business foundation</div></td>
<td class="oddrow" style="text-align: right" width="16%"></td>
</tr>
<tr>
<td class="header2" width="83%">Org anization Setup</td>
<td class="header2" style="text-align: right" width="16%"><a href="#" onclick="toglay er('OS');return false;"><img border="0" src="image/errow%20down.jp g" width="13" height="14"></a></td>
</tr>
<tr>
<td colspan="2"><di v id="OS" class="oddrow" style="display: none">descripti on 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="toglay er(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'.