怎么实现折叠菜单

Question

代码：
<div id="content">
<div class="content_left">
<div class="global_module news">
<h3>最新动态</h3>
<div class="scrollNews" >
<ul>
<li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
<li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
<li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>
<li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>
<li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>
<li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>
<li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>
</ul>
</div>
<p class="module_up_down"><img src="images/down.gif" alt="" /></p>
</div>
  <div class="global_module procatalog">
<h3>产品分类</h3>
<ul class="m-treeview">
<li class="m-expanded">
<span>衬衫</span>
<ul>
<li><span>短袖衬衫</span></li>
<li><span>长袖衬衫</span></li>
</ul>
</li>
<li class="m-expanded">
<span>卫衣</span>
<ul>
<li ><span>开襟卫衣</span></li>
<li ><span>套头卫衣</span></li>
</ul>
</li>
<li class="m-expanded">
<span>裤子</span>
<ul>
<li><span>休闲裤</span></li>
<li><span>免烫卡其裤</span></li>
<li><span>牛仔裤</span></li>
<li><span>短裤</span></li>
</ul>
</li>
   </ul>
<p class="module_up_down"><img src="images/down.gif" alt="" /></p>
</div>
    </div>css样式：
.content_left .news ul { 
padding:5px 0 5px 15px; 
}
.content_left .procatalog ul { 
padding:5px 0 5px 15px; 
}
.procatalog .m-treeview{
    background:#FFFFFF;
}
.procatalog .m-treeview li span {
    cursor: pointer;
}
.procatalog .m-treeview li.m-expanded {
padding-left:16px;
background:url('../images/treeview-expanded.gif') no-repeat 0 0;
}
.procatalog .m-treeview li.m-expanded ul li {
   list-style-image: url('../images/treeview-item.gif');
}
.procatalog .m-treeview li.m-collapsed {
    padding-left:16px;
    background:url('../images/treeview-collapsed.gif') no-repeat 0 0;
}
.procatalog .m-treeview li.m-collapsed ul{
    display:none;
}