Jquery 控制DIV隐藏/显示

效果：

实现代码：

jquery —>

// 收缩展开效果
$(document).ready(function () {
　　$("#mostrar").click(function (event) {
　　　　event.preventDefault();
　　　　$("#caja").slideToggle(300, function () {
　　　　　　if ($(this).is(":hidden")) {
　　　　　　　　$("#hidNeedInvoice").val("0");
　　　　　　　　$("#checkImg").attr("src", "Images/16.png");
　　　　　　　　$("#inviceMark").text("是否需要发票");
　　　　　　}
　　　　　　else {
　　　　　　　　$("#hidNeedInvoice").val("1");
　　　　　　　　$("#checkImg").attr("src", "Images/16_2.png");
　　　　　　　　$("#inviceMark").text("需要发票");
　　　　　　}
　　　　});
　　});
});

HTML —>

<!--发票-->
<div class="boxInvoice">
<span></span>
<a href="#" id="mostrar"><img id="checkImg" style="float:left;" src="Images/16.png"/><h6 id="inviceMark">是否需要发票</h6></a>
<input type="hidden" id="hidNeedInvoice" value="0" />
<div id="caja">
<table style="width:500px; height:120px; margin:10px 0 10px 20px;">
<tr>
<td style="text-align:center;">发票种类：</td>
<td>
<asp:RadioButtonList ID="rbtl_invoice" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Value="0" Selected="True">个人</asp:ListItem>
<asp:ListItem Value="1">公司</asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr>
<td style="text-align:center;">发票抬头：</td>
<td>
<input type="text" runat="server" id="txt_invoice_title" />
</td>
</tr>
<tr>
<td style="text-align:center;">发票内容：</td>
<td>
<input type="text" runat="server" id="txt_invoice_content"/>
</td>
</tr>
</table>
</div>

CSS —>

/* 收缩展开效果 */
.boxInvoice{position:relative;width:960px; margin:0px auto; margin-top:10px;}
.boxInvoice a{text-decoration:none;}
#caja {
line-height:22px;padding:0 6px;color:#666; height:130px; border:1px solid #e7e7e7; display: none;
}
#mostrar{
display:block;
padding:5px;
background:#F5F5F5;
}

引用项目：远古海悦会商城网站