1：保存以下Javascript代码为sh.js文件
function showhide(id,sh){
try{
if(document.getElementById(id)){
if(document.getElementById(id).style.display=='none'){
document.getElementById(id).style.display='block';
sh.className="show"
}else{
document.getElementById(id).style.display='none';
sh.className="hide"
}
}
}catch(e){}
}
或者从这里下载：http://qqcampus.org/THEMES/default/SCRIPT/sh.js
2：在首页或者列表页head区加入以下代码
<script language="Javascript" src="/THEMES/default/SCRIPT/sh.js" type="text/javascript"></script>
其中/THEMES/default/SCRIPT/sh.js为你的js文件路径,我的只是举个例子.
3：保存以下图标中的任一个到Z-blog的/THEMES/default/sytle/default目录（举例）
特意精选并制作了7个图标，具体大小位置如下，可以根据你Zblog的页面设计挑选，使用方法和介绍见第5条
1:12*12
background-position: -6px -6px;
background-position: -6px -30px;
2:9*13
background-position: -7px -7px;
background-position: -7px -33px;
3:9*10
background-position: -5px -5px;
background-position: -5px -25px;
4:11*11
background-position: -6px -6px;
background-position: -6px -28px;
5:10*9
background-position: -5px -5px;
background-position: -5px -23px;
6:13*11
background-position: -6px -6px;
background-position: -6px -28px;
4：找到列表模板文件b_article-multi.html
把要隐藏的部分用放在<div id="sh-<#article/id#>" class="sh"></div>里
把要放按钮的地方这样写<div class="show" onclick='showhide("sh-<#article/id#>",this);'></div>
5：css里写，提到css sprites
1>给post-title加个float:left;，这和下面.show,.hide的float: right;在一块保证按钮和标题同行显示。
并适当调整post-title的width
2>加上
/* 定义按钮整体样式 */
.show,.hide{
float: right;
width: 11px;
height: 11px;
margin: 6px 12px 0 0;
display: inline;
background-image: url('default/sh.gif');
background-repeat: no-repeat;
cursor: pointer;
}
/* 用css sprites定义图片展开和隐藏时按钮图标的切换 */
.show{background-position: -6px -6px;}
.hide{background-position: -6px -28px;}
/* 禁止下面的内容自动填充到float之间的区域 */
.sh{
clear:both;
}
这里用到了css sprites，优点在于在切换展开和隐藏列表时，避免图标按钮的加载延时；并且减少服务器的http请求，从而实现了图片的web加速。
