Related styles: Code
. Mainbox h3 { Margin-bottom : 0px ; Line-height : 32px ; Height : 32px ; Padding-left : 1em ; Background : URL (http://www.cnblogs.com/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: < Div Class = "Mainbox" >
< Span Class = "Headactions" >
< IMG ID = "Category_cn_img" SRC = "Http://www.cnblogs.com/Images/expand.jpg" ALT = "Expand/collapse" 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 = "Pixel PX" 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:Code
// Show or hide content
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 " );
}
}
}