相关样式:
HTML:
JS:
注:要引入jQuery包,我引入的是jquery-1.3.2.min.js
CSS
.mainbox h3{ margin-bottom:0px; line-height:32px;height:32px;padding-left:1em;background:url(../../Images/forumbg.gif) repeat-x 0 0;font-size:13px;font-weight:700;border-bottom:1px solid #E6E7E1;border-top:4px solid #E8F0F7; border-left:1px solid #E8F0F7;border-right:1px solid #E8F0F7;}
.mainbox{ width:880px;position:relative; margin-left:auto; margin-right:auto; margin-bottom:5px;}
.headactions{position:absolute;top:12px; right:24px;line-height:1em;}
.tablelist{ width: 880px; margin-left: auto; margin-right: auto; border:1px solid;}
td{background:#e5f1f4;}
.mainbox h3{ margin-bottom:0px; line-height:32px;height:32px;padding-left:1em;background:url(../../Images/forumbg.gif) repeat-x 0 0;font-size:13px;font-weight:700;border-bottom:1px solid #E6E7E1;border-top:4px solid #E8F0F7; border-left:1px solid #E8F0F7;border-right:1px solid #E8F0F7;}
.mainbox{ width:880px;position:relative; margin-left:auto; margin-right:auto; margin-bottom:5px;}
.headactions{position:absolute;top:12px; right:24px;line-height:1em;}
.tablelist{ width: 880px; margin-left: auto; margin-right: auto; border:1px solid;}
td{background:#e5f1f4;}
HTML:
Html
<div class="mainbox">
<span class="headactions">
<img id="category_CN_img" src="http://www.cnblogs.com/Images/expand.jpg" alt="展开/收起" onclick="toggle_collapse('category_CN');"/>
</span>
<h3 onclick="toggle_collapse('category_CN');">
<a href="#">Content</a>
</h3>
<div id="category_CN" style=" display:none;">
<table class="tablelist" align="center" cellpadding="0">
<tr>
<td>
Title:
</td>
<td colspan="3">
<te:TETextBox ID="txtCSTitle" runat="server" Width="380px" MaxLength="100"></te:TETextBox>
</td>
</tr>
<tr>
<td>
Content:
</td>
<td colspan="3">
<FCKeditorV2:FCKeditor ID="txtCSContent" runat="server" Height="350px" Width="98%">
</FCKeditorV2:FCKeditor>
</td>
</tr>
</table>
</div>
</div>
<div class="mainbox">
<span class="headactions">
<img id="category_CN_img" src="http://www.cnblogs.com/Images/expand.jpg" alt="展开/收起" onclick="toggle_collapse('category_CN');"/>
</span>
<h3 onclick="toggle_collapse('category_CN');">
<a href="#">Content</a>
</h3>
<div id="category_CN" style=" display:none;">
<table class="tablelist" align="center" cellpadding="0">
<tr>
<td>
Title:
</td>
<td colspan="3">
<te:TETextBox ID="txtCSTitle" runat="server" Width="380px" MaxLength="100"></te:TETextBox>
</td>
</tr>
<tr>
<td>
Content:
</td>
<td colspan="3">
<FCKeditorV2:FCKeditor ID="txtCSContent" runat="server" Height="350px" Width="98%">
</FCKeditorV2:FCKeditor>
</td>
</tr>
</table>
</div>
</div>
JS:
JS
//显示或隐藏内容
function toggle_collapse(objname) {
var obj = $("#" + objname);
if (obj) {
obj.slideToggle("2000");
}
var img = $("#" + objname + '_img');
if (img) {
if (img.attr("src") == "http://www.cnblogs.com/Images/collapse.jpg") {
img.attr("src", "http://www.cnblogs.com/Images/expand.jpg");
img.attr("title", "expand");
}
else {
img.attr("src", "http://www.cnblogs.com/Images/collapse.jpg");
img.attr("title", "collapse");
img.attr("title", "collapse");
}
}
}
//显示或隐藏内容
function toggle_collapse(objname) {
var obj = $("#" + objname);
if (obj) {
obj.slideToggle("2000");
}
var img = $("#" + objname + '_img');
if (img) {
if (img.attr("src") == "http://www.cnblogs.com/Images/collapse.jpg") {
img.attr("src", "http://www.cnblogs.com/Images/expand.jpg");
img.attr("title", "expand");
}
else {
img.attr("src", "http://www.cnblogs.com/Images/collapse.jpg");
img.attr("title", "collapse");
img.attr("title", "collapse");
}
}
}
注:要引入jQuery包,我引入的是jquery-1.3.2.min.js