有没有懂HTML和JS的 来帮个忙

我的意图.

比如页面如下:






我鼠标点击一.页面变为

  @#@##@^^^^#@(内容1)




如果我鼠标再点击三.则页面变为:

  @#@##@^^^^#@(内容1)


  @#@##@^^^^#@(内容3)


如果我再次点击一.
则关闭内容1.其余不变.

这种折叠式的页面如何实现.

我自己写了一个代码.但是在实现上碰到了很多麻烦 BUG多多.

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<STYLE type="text/css">
.sh{
        width:100%;
}
.sh ul{
        float:none;
        list-style-type: none;
}
.sh li{
        padding:1px;
        ont-size:16px;
        font-weight:bold;
        cursor:hand;
        width:95%;       
}
.h2 {
        margin:0 5px;
        padding:0;
        color:#003399;
        font-size:16px;
        border:0;
        }
.h3 {
        font-size:13px;
        color:#FF6131;
        padding-left: 16px;
        }
.content{
        border:1px #005AC6 dashed;
        position:relative;
        height:auto;
        width:100%;
        display:none;
        padding:10px;
        font-size:12px;
        }
.div1{
        padding:1px;
}
.div2{
        padding:1px;
        text-align:right;
        color:#FF6131;
}
a{
        display:block;
        text-decoration:none;
}
</STYLE>

<script>
function showWord(){
if(aa1.style.display==""){
aa1.style.display="none";
}else{
aa1.style.display="";
}
if(aa2.style.display==""){
aa2.style.display="none";
}else{
aa2.style.display="";
}
if(aa3.style.display==""){
aa3.style.display="none";
}else{
aa3.style.display="";
}
if(aa4.style.display==""){
aa4.style.display="none";
}else{
aa4.style.display="";
}
}
</script>

<DIV class="sh" ><UL>
<LI onMouseMove="document.all.d1.style.display='block'" onclick="showWord()">
<a href="#">
<b class="h2">标题1</b>
<b class="h3">副标题1</b>
</a></LI>
<LI onMouseMove="document.all.d2.style.display='block'" onclick="showWord()">
<a href="#">
<b class="h2">标题2</b>
<b class="h3">副标题2</b>
</a></LI>
<LI onMouseMove="document.all.d3.style.display='block'" onclick="showWord()">
<a href="#">
<b class="h2">标题3</b>
<b class="h3">副标题3</b>
</a></LI>
<LI onMouseMove="document.all.d4.style.display='block'" onclick="showWord()">
<a href="#">
<b class="h2">标题4</b>
<b class="h3">副标题4</b>
</a></LI>
</UL>

<DIV class="content" id="d1">
<span id="aa1" style="display:none">
内容1<br/>
</span></DIV>
<DIV class="content" id="d2">
<span id="aa2" style="display:none">
    内容2<br/>
</span></DIV>
<DIV class="content" id="d3">
<span id="aa3" style="display:none">
    内容3<br/>
</span></DIV>
<DIV class="content" id="d4">
<span id="aa4" style="display:none">
内容4</div>
</span></DIV>
</DIV>


麻烦朋友们帮忙修改下这个代码..

用户系统信息:Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506; MAXTHON 2.0)
欢迎光临我的博客.王子's  Dreamland.
请你抬头望望天,当天还是那样蓝,云还是那样潇洒,这说明,我的离去并没有带走你的世界