新手请教一下这个点击展开和收起列表的写法是怎么实现的？
这个网址导航，金山手机版的，m.duba.com

下面分类例如：视频、小说、彩票等li元素，点击了对应的ul就展开或者收缩，请问这个写法是怎么实现的？

谢谢。
------解决方案--------------------
不就是设置目标容器的style.display=none/block就好了，再次点击判断下状态，然后切换到另外的状态去

<a href="javascript:showhide('xiaoshuo')">小说</a>

<div id="xiaoshuo" style="display:none">小说内容......</div>

<br /><a href="javascript:showhide('shipin')">视频</a>

<div id="shipin" style="display:none">视频内容......</div>

<script type="text/javascript">

    function showhide(id) {

        var o = document.getElementById(id);

        o.style.display = o.style.display == 'block' ? 'none' : 'block';

    }

</script>

------解决方案--------------------

CSS部分：

<style type="text/css">

	.btn_links {

		padding: 0 0 0 20%;

		background: #F6F9FE;

		box-shadow: inset 0 1px 2px #E8EAEF;

		height: 0;

		overflow: hidden;

	}

	.btn_links_open {

		overflow: visible;

		padding: 5px 0 5px 20%;

		height: auto;

	}

</style>

HTML部分：

<ul class="btn_list clearfix"> 

	<li><a href="javascript:;" class="aft">视频</a></li> 

	<li><a href="http://m.tv.sohu.com/" stat="82452">搜狐</a></li> 

	<li><a href="http://www.iqiyi.com/" stat="82453">奇艺</a></li> 

	<li><a href="http://www.youku.com/?" stat="90969">优酷</a></li> 

	<li><a href="http://m.letv.com/" stat="82461">乐视</a></li> 

</ul>

<ul class="btn_links clearfix"> 

	<li><a href="http://m.tudou.com/wap/index" stat="82457">土豆</a></li> 

	<li><a href="http://m.funshion.com/index" stat="82456">风行</a></li> 

	<li><a href="http://m.baidu.com/video" stat="82455">百度</a></li> 

	<li><a href="http://www.vovokan.com/" stat="88998">窝窝看</a></li> 

	<li><a href="http://www.y80s.com/" stat="82459">80s</a></li> 

	<li><a href="http://m.pps.tv/" stat="82454">PPS</a></li> 

	<li><a href="http://www.qire123.com/" stat="82458">奇热</a></li> 

	<li><a href="http://m.56.com" stat="86678">56视频</a></li> 

	<li><a href="http://v1.roboo.com/proxy/video/search_xcb.jsp" stat="86679">儒豹</a></li> 

	<li><a href="http://m.ku6.com/" stat="86680">酷6</a></li> 

	<li><a href="http://m.joy.cn/" stat="86681">激动</a></li>