Div+Css+JS做多个显示/隐藏内容块

相关样式：

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 ="展开/收起"  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：

Code
//显示或隐藏内容
        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");

                }
            }

        }

转载于:https://www.cnblogs.com/hantianwei/archive/2009/09/27/1575143.html