这里我们要实现的是一个，可折叠面板，效果如图所示：

首先我们建立一个HTML文件，保存后，在工具栏找到折叠面板,如图所示：

连续插入几个这样的面板，就会出现多个可折叠面板了

要做到如图这种效果首先我们要准备四个背景图片：

首先我们来研究一下HTML代码，这里也需要JavaScript文件和css文件。

<script src=”SpryAssets/SpryAccordion.js” type=”text/javascript”></script>
<link href=”SpryAssets/SpryAccordion.css” rel=”stylesheet” type=”text/css” />

然后我们只需要在原有的CSS基础上去改变它的样式表就行了

下面是修改以后的CSS代码，这里就不一一说明了

.TabbedPanels {
 margin: 0px;
 padding: 0px;
 float: left;
 clear: none;
  500px;
}

这里是最基础的设置

.TabbedPanelsTab {
 display:block;
 height:30px;
 position: relative;
 top: 2px;
 float: left;
 padding:0px 0px 0px 15px;
 margin:0;
 font: bold 14px Arial;
 background:url(../2.gif);
 list-style: none;
 cursor:pointer;
 -moz-user-select: none;
 -khtml-user-select: none;
 color:#fff;
}
.TabbedPanelsTab span{
 display:block;
 background:url(../2.gif) right top;
 padding:7px 25px 7px 0;
}

这里对于span的设置，是利用的滑动门技术HTML代码中添加了标签如下：

<div class=”AccordionPanelTab”><span>Web Dev</span></div>

其他几个同样设置

.TabbedPanelsTabHover{
 background:url(../1.gif);
 color:#900;
}
.TabbedPanelsTabHover span{
 display:block;
 background:url(../1.gif) right top;
 padding:7px 25px 7px 0;
}

设置鼠标经过时候的效果

.TabbedPanelsTabSelected {
 background:url(../3.gif);
 color:#900;
}
.TabbedPanelsTabSelected span{
 display:block;
 background:url(../3.gif) right top;
 padding:7px 25px 7px 0;
}

设置点选以后的效果

其他没有提到过的地方，就照原样不动。到这里我们就可以实现最终的效果了。