jQuery实现web页面区域模块 隐藏显示

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="./js/jquery-1.2.2.pack.js" ></script>

<style>

.sidebtn {
    background: url(./img/list.gif) no-repeat top left;
    height: 16px;
    margin: 0 auto;
    position: relative;
    top: 0px;
}

.sidebtn.on {
    background: url(./img/fold.gif) no-repeat top left;
    height: 16px;
    margin: 0 auto;
    position: relative;
    top: 0px;
}


</style>

<script>        
$(document).ready(function () {
      $('.sidebtn').click(function () {
          if ($(this).hasClass("on")) {
              $(this).removeClass("on");
             }else{
              $(this).addClass("on");
            }
            
          $(this).next("div").slideToggle();
    });
});
</script>



<fieldset>
            <legend>区域 3</legend>
              <p class="sidebtn"></p>
                <div id="isOpened" style="display:none">
                <table>
                        <tr>
                            <td align="center"><span>叠加字符:</span></td>
                            <td colspan="3" align="left"><input id="s1_text3" type="text" size="45"/></td>
                            <td align="center"><span>&nbsp;&nbsp;&nbsp;字体大小:</span></td>
                            <td align="left"><input id="s1_text3_size" type="text" size="9"/></td>
                                
                        </tr>
                        <tr>
                            <td align="center"><span>区域宽度:</span></td>
                            <td align="left"><input id="s1_text3_width" type="text"/></td>        
                            <td align="center"><span>&nbsp;&nbsp;&nbsp;&nbsp;区域高度:</span></td>
                            <td align="left"><input id="s1_text3_high" type="text" size="9"/></td>    
                            <td><span>&nbsp;&nbsp;&nbsp;粗&nbsp;&nbsp;&nbsp;&nbsp;体:</span></td>
                          <td>
                                <select id="s1_text3_bold" style="width:67">
                                    <option value="0" selected="">0</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                        <td><span>显示位置:</span></td>
                        <td align="center">
                            <span>X</span>
                            <input id="s1_text3_startx" type="text" size="6"/>
                            <span>Y</span>
                            <input id="s1_text3_starty" type="text" size="6"/>
                        </td>    
                        <td><span>&nbsp;&nbsp;&nbsp;&nbsp;旋转方向:</span></td>
                            <td>
                                <select id="s1_text3_rotate" style="width:67">
                                    <option value="0" selected="">0</option>
                                    <option value="90">90</option>
                                    <option value="180">180</option>
                                    <option value="270">270</option>
                                </select>
                            </td>                                
                        <td><span>&nbsp;&nbsp;&nbsp;斜&nbsp;&nbsp;&nbsp;&nbsp;体:</span></td>
                        <td>
                                <select id="s1_text3_italic"   style="width:67">
                                    <option value="0" selected="">0</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                </select>
                            </td>    
                    </tr>
                    <tr>    
                        <td><span>显示方式:</span></td>
                            <td>
                                <select id="s1_text3_type">
                                    <option value="0" selected="">字符 </option>
                                    <option value="1">时间 </option>
                                </select>
                            </td>            
                        <td><span>&nbsp;&nbsp;&nbsp;&nbsp;颜&nbsp;&nbsp;&nbsp;色:</span></td>
                        <td>
                            <select id="s1_text3_color" style="width:67">
                                <option selected="" value="0">Red</option>
                                <option value="1">Blue</option>
                                <option value="2">Black</option>
                                <option value="3">White</option>
                                <option value="4">Green</option>
                                <option value="5">Yellow</option>
                                <option value="6">Cyan</option>
                                <option value="7">Magent</option>
                            </select>
                        </td>
                        <td><span>&nbsp;&nbsp;&nbsp;边框宽度:</span></td>
                            <td>
                                <select id="s1_text3_outline" style="width:67">
                                    <option value="0" selected="">0</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                </select>
                            </td>                                
                    </tr>
                    <tr>    
                    </tr>
                </table>
                <input type="button" id="stream1" value="保存" onclick = "Judge3()"/>
                <input type="button" id="clean" value="清除" onclick = "clean3()"/>
                </div>
            </fieldset>

效果：