<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3制作的垂直口风琴</title>
<style>
*{
margin: 0;
padding: 0;
}
body {
padding: 20px 100px;
}
.verticalAccordion {
width: 500px;
margin: 0 auto;
}
.verticalAccordion ul {
width: 100%;
margin: 0;
padding: 0;
}
.verticalAccordion li {
list-style: none outside none;
display: block;
margin: 0;
padding: 0;
height: 40px;
width: 100%;
overflow: hidden;
background: #f0f0f0;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
transition: height 0.3s ease-in-out;
}
.verticalAccordion h3 {
margin: 0;
padding: 10px;
height: 19px;
border-top: 1px solid #f0f0f0;
text-transform: uppercase;
color: #000;
background: #ccc;
cusor: pointer;
position: relative;
background: -moz-linear-gradient( top, #999999, #cccccc);
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
background: -webkit-linear-gradient( top, #999999, #cccccc);
background: -o-linear-gradient( top, #999999, #cccccc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)";
}
.verticalAccordion h3:before {
content:"";
border: 5px solid #000;
border-color: #000 transparent transparent;
position: absolute;
right: 10px;
top: 15px;
width: 0;
height: 0;
}
.verticalAccordion div {
margin: 0;
voerflow: auto;
padding: 10px;
height: 220px;
}
.verticalAccordion li:hover {
height: 280px;
}
.verticalAccordion li:hover h3 {
color: #fff;
background: #000;
background: -moz-linear-gradient( top, #454545, #000000);
background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000));
background: -webkit-linear-gradient( top, #454545, #000000);
background: -o-linear-gradient( top, #454545, #000000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)";
}
.verticalAccordion li:hover h3:before {
border-color: transparent transparent transparent #fff;
}
</style>
</head>
<body>
<div class="verticalAccordion">
<ul>
<li>
<h3>Heading 1</h3>
<div>Content for Panel 1.</div>
</li>
<li>
<h3>Heading 2</h3>
<div>Content for panel 2.</div>
</li>
<li>
<h3>Headgin 3</h3>
<div>Content for panel 3.</div>
</li>
<li>
<h3>Heading 4</h3>
<div>Content for panel 4.</div>
</li>
</ul>
</div>
</body>
</html>
效果图：
使用纯CSS制作手风琴效果，主要使用的是伪类“:hover”来实现，不过“:hover”只能在现代浏览器运行，在IE6下是只能支持“a:hover”，而别的元素将无法支持。
在这个实例中将添加CSS3的transition来增加过渡效果不过CSS3的效果在IE6-8下是不支持的。
1.div.verticalAccordion:我们将整个手风琴每个面板都放在一个div的容器内；
2.li：每下li放置一个面板，包含了一个标题和标题所对应的主内容；
3.h3:每个h3就是一个面板的标题；
4.div:与h3相邻的div就是每个面板的主内容。
1.默认状态效果：因为我们没有使用“:target”伪类，我们无法指定手风琴的默认状态，所以在页面载入就设置了所有面板为折叠状态。我们此处设置了“li”的高度和“h3”的高度相等，并在“li”上设置其“overflow:hidden”，以防止内容溢出；
2.默认panel标题：上一条说“h3”的高度和“li”高度相同，此例中我们的“h3”高度是通过“padding+border+height”之合计算而来，并且刚好等于“li”的高度；
3.面板主内容：需要在面主内容上设置一个“overflow:auto”，以防止内容溢出能正常阅读，因为我们在“li”设置了一个固定高度，用来控制面板展开时的高度。
4.三角形：使用“h3:before”配合border制作一个向下的三角标志。
使用鼠标悬停事件（“li:hover”）来响应手风琴展开的效果。
1.展开面板：通过在“li”元素的鼠标悬停事件（“:hover”）来改变“li”的高度，从而达到面板展开的效果；
2.高亮显示当前标题：当“li:hover”下时，改变当前下的“h3”属性，让其处于高亮状态。这里关键的一点我们使用在“li:hover h3”而并不是直接应用在“h3:hover”
3.改变三角形状态：同前面的方法一样，我们并展开状态下的三角形改变颜色和形状，表示面板处于展开状态。
添加CSS3效果
通过上面的代码，我们已经实现了除IE6下的垂直手风琴效果。为了让你的手风琴效果更具有视觉冲击力，我们在这里给他使用一些CSS3效果。其中最重要的是在“li”上添加CSS3 transition效果，增加手风琴展开时达到一种平滑过渡的效果。
当然你还可以给其添加一些其他的CSS3效果，比如说border-radius、box-shadow、text-shadow、@font-face、transform、Gradient和RGBA等效果。下面我们就在此例中给“h3”添加Gradient效果：
使用CSS制作手风琴效果，最关键的是其结构，需要将标题和其对应的主内容放在同一个块中，然后通过设置这个元素块当前状态下的高度实现折叠效果，另外在这个元素块设置其鼠标悬停事件时改变其默认高度，从而达到展开效果。