Выпадающий список

[chest]

есть выпадающий список вида:

<div class="txt2">
		<table><tr>
	<td>
			<div class="side_rub">
				<div class="entry"> 
                    <a class="plus" href="#" onclick="return switchRub(this,'rub1')"></a> 
				<a href="/doc/pidr/BPD01.html" class="lst1">Безпека життєдіяльності та охорона праці</a>
                                    </div> 
                <div class="rub_child" id="rub1"> 
					<a href="/doc/pidr/BPD11111.html" class="i">Безпека життєдіяльності та підтримання психосоматичного здоров’я молоді</a>
                    </div>
			<div class="entry"> 
                    <a class="plus" href="#" onclick="return switchRub(this,'rub2')"></a> 
				<a class="plus" href="#" onclick="return switchRub(this,'rub2')">вывфывыфвфыв</a>
                                    </div> 
                <div class="rub_child" id="rub2"> 
					<a href="/doc/pidr/BPD11112.html" class="i">вывфыфыв</a>
                    </div><div class="entry"> 
                    <a class="plus" href="#" onclick="return switchRub(this,'rub3')"></a> 
				<a href="/doc/pidr/BPD03.html" class="lst1">выфвыфвыфвфыв</a>
                                    </div> 
                <div class="rub_child" id="rub3"> 
					<a href="/doc/pidr/BPD11113.html" class="i">выфвыфвфв</a>
					<a href="/doc/pidr/BPD11114.html" class="i">выфвыфвыфвыфв</a>
					<a href="/doc/pidr/BPD11115.html" class="i">выфвыфвыфвыфвыфв</a>
                    </div>
</div>
	</td>
		</tr></table>
</div></div>

<script language="javascript"> 
var currub = "";
var temprub;
var maxrub = 22;
for(var i=0;i<maxrub;i++)
    if(temprub = document.getElementById("rub"+i))
        temprub.style.display = "none";
if(currub != "")
    document.getElementById("rub"+currub).style.display = "block";

function switchRub(button,rubid)
{
    if(button.className == "plus")
    {
        document.getElementById(rubid).style.display = "block";
        button.className = "minus";
    }
    else
    {
        document.getElementById(rubid).style.display = "none";      
        button.className = "plus";

    }
    return false;
}

</script>

css:

.txt2 {
	overflow: scroll;
	overflow-x: hidden;
	height: 500px;
	width: 530px;
	border: 0;	
}
.side_rub div.entry .single {
	background:url('/img/arr1.gif') 0px 0px no-repeat;position:absolute;top:0px;left:0px;
	width:22px;height:18px
}
.side_rub div.entry {
	position:relative;
	font-family: tahoma;
	font-size: 14px;
	color: #2E6DB1;
}
.side_rub div.entry .plus {
	background:url('/img/arr1.gif') 0px 0px no-repeat;position:absolute;top:0px;left:0px;
	width:22px;height:18px;
}
.side_rub div.entry .minus {
	background:url('/img/arr2.gif') 0px 0px no-repeat;position:absolute;top:0px;left:0px;
	width:22px;height:18px;
}
.side_rub a, .side_rub b {
	display:block;padding-left:11px;
	color: #2E6DB1;
	font-weight:normal;
}
.side_rub a {
	color: #2E6DB1;
}
.side_rub .rub_child {
	padding-left:27px;
	padding-bottom:3px;
}
.side_rub .rub_child a {
	font-weight:normal;padding-left:0px;
}
.side_rub .rub_child b {
	padding-left:0px
;}
a.i:link {
	font-family: tahoma;
	font-size: 11px;
	font-weight: normal;
	color: #042f5b;
	text-decoration: none;
}
a.i:visited {
	font-family: tahoma;
	font-size: 11px;
	font-weight: normal;
	color: #042f5b;
	text-decoration: none;
}
a.i:active {
	font-family: tahoma;
	font-size: 11px;
	font-weight: normal;
	color: #042f5b;
	text-decoration: none;
}
a.i:hover {
	font-family: tahoma;
	font-size: 11px;
	font-weight: normal;
	color: #2E6DB1;
	text-decoration: underline;
}
a.h:link {
	font-family: tahoma;
	font-size: 12px;
	font-weight: normal;
	color: #042f5b;
	text-decoration: none;
}

Как сделать, чтобы при открытие одного подменю, второе закрывалось?

Заранее спасибо!