js展开与隐藏(带向上隐藏与向下展开图标)

/*-------------------------jquery代码----------------------------*/

<script type="text/javascript">
$(document).ready(function(){
$(".tabs1").show();
$(".tabs").hide();

$(".tab_box #tab").click(function(){

var ss=this.lastChild.attributes["id"].value ;
var getv=document.getElementById(ss);


if(getv.attributes.class.value ==2){
this.lastChild.setAttribute("style","background:url(../../html/images/triangle1.png);width:15px; height:15px;float:right;");
this.lastChild.setAttribute("class",1);
}else{
this.lastChild.setAttribute("style","background:url(../../html/images/triangle.png);width:15px; height:15px;float:right;");
this.lastChild.setAttribute("class",2);
}


$(this).next(".tabs").slideToggle("slow");
})
});
</script>

/*-----------------------------html代码------------------------------*/

<div class="content">
<div class="tab_box">
<div id="tab1">基础知识</div>
<div class="tabs1">
<table id="table1">
<tr id="tr1">
<td id="title">序号</td>
<td id="title">属性名称</td>
<td id="title">属性值</td>
<td id="title">说明</td>
</tr>
<tr>
<td id="title">1</td>
<td id="title">课程内部编号</td>
<td id="title"><input type="text" /></td>
<td id="title">课程在各个网院内部的编号，如果没有则填“无”，不超过20个字符</td>
</tr>
<tr id="tr2">
<td id="title">2</td>
<td id="title">课程名称</td>
<td id="title"><input type="text" /></td>
<td id="title">对外公布的正式名称全称，如“宏观经济学”、“计算机网络安全”等；不超过100个字符</td>
</tr>
<tr>
<td id="title">3</td>
<td id="title">课程类型</td>
<td id="title"><input type="text" /></td>
<td id="title">A.公共必修；B.公共选修；C.专业必修；D.专业选修。可多选，以“;”（ 英文状态下的分号）分隔，如“A;B”</td>
</tr>

</table>
</div>
</div>
<div class="tab_box">
<div id="tab">章节定义<div id="font1" class="2"></div></div>

<div class="tabs">
<table id="table1">
<tr id="tr1">
<td id="title"><input type="checkbox" /></td>
<td id="title">章节编号</td>
<td id="title">章节标题</td>
<td id="title">内容说明</td>
<td id="title">操作</td>
</tr>
<tr>
<td id="title"><input type="checkbox" /></td>
<td id="title">1</td>
<td id="title">概述</td>
<td id="title">今天周一</td>
<td id="title"><input type="button" id="delete" value="删除" />
<input type="button" id="update" value="修改" />
<input type="button" id="add" value="增加节" /></td>
</tr>
<tr id="tr2">
<td id="title"><input type="checkbox" /></td>
<td id="title">1.1</td>
<td id="title">保险常识</td>
<td id="title">今天周二</td>
<td id="title"><input type="button" id="delete" value="删除" />
<input type="button" id="update" value="修改" />
<input type="button" id="add" value="增加节" /></td>
</tr>
<tr>
<td id="title"><input type="checkbox" /></td>
<td id="title">2</td>
<td id="title">保险公司</td>
<td id="title">今天周三</td>
<td id="title"><input type="button" id="delete" value="删除" />
<input type="button" id="update" value="修改" />
<input type="button" id="add" value="增加节" /></td>
</tr>
</table>
<center>
<div class="add1"><input type="button" value="添加" id="btn" /></div>
</center>
</div>
</div>

<div class="tab_box">
<div id="tab">知识点定义<div id="font2" class="2"></div></div>
<div class="tabs">
<table id="table1">
<tr id="tr1">
<td id="title"><input type="checkbox" /></td>
<td id="title">序号</td>
<td id="title">知识点</td>
<td id="title">内容说明</td>
<td id="title">操作</td>
</tr>
<tr>
<td id="title"><input type="checkbox" /></td>
<td id="title">1</td>
<td id="title">保险常识</td>
<td id="title">滴答滴答滴答</td>
<td id="title"><input type="button" id="delete" value="删除" />
<input type="button" id="update" value="修改" /></td>
</tr>
<tr id="tr2">
<td id="title"><input type="checkbox" /></td>
<td id="title">2</td>
<td id="title">保险公司</td>
<td id="title">今天天气好晴朗</td>
<td id="title"><input type="button" id="delete" value="删除" />
<input type="button" id="update" value="修改" /></td>
</tr>
<tr>
<td id="title"><input type="checkbox" /></td>
<td id="title">3</td>
<td id="title">保险操作</td>
<td id="title">你好还海撒倪大红</td>
<td id="title"><input type="button" id="delete" value="删除" />
<input type="button" id="update" value="修改" /></td>
</tr>
</table>
<center>
<dic class="add1"><input type="button" value="添加" id="btn" /></div>
</center>
</div>
</div>
</div>

/*-----------------------------css代码----------------------------*/

body{ width:95%; font-family:"宋体"; font-size:13px;}

.content{ width:100%; margin-left:25px; font-size:14px; margin-top:20px;}
.tab_box{ width:100%; margin:0 auto;}
.tab_box #tab{ background:#CCCCCC; margin-top:20px; cursor:pointer;}
.tab_box #tab1{ background:#CCCCCC; margin-top:20px; cursor:pointer;}
.tabs{ width:100%;}
.tabs1{ width:100%;}
#table1{width:100%;border-collapse: collapse;border-spacing: 0; margin-bottom:15px; border:1px solid #666666; bordercolor:#858587; font-size:13px;}
#title{ text-align:center; border:1px dotted #666666;}
#tr1{ background:#d8d8d8; height:35px;}
#tr2{ background:#f2f2f2;}
#btn{ width:7%;}


.tab_box #tab #font1{ width:15px; height:15px; float:right; background:url(../images/triangle.png) no-repeat;}
.tab_box #tab #font2{ width:15px; height:15px; float:right;background:url(../images/triangle.png) no-repeat;}