纯css3手风琴效果2

这三个案例实际上就是用了两种技术，一个是radio来控制，一个是checkbox来控制，用radio表示只有一个可以展开（radio的只有一个是选中状态），而checkbox则表示可以同时展开多个（checkbox可以多个选中）。其实道理都是一样的，对radio或者checkbox的选中状态进行判断，然后决定其下面的兄弟元素的高度。

demodownload

css主要代码：

.ac-container {
    margin: 10px auto 30px;
    text-align: left;
    width: 400px;
}
.ac-container label {
    background: -moz-linear-gradient(center top , #FFFFFF 1%, #EAEAEA 100%) repeat scroll 0 0 transparent;
    box-shadow: 0 0 0 1px rgba(155, 155, 155, 0.3), 1px 0 0 0 rgba(255, 255, 255, 0.9) inset, 0 2px 2px rgba(0, 0, 0, 0.1);
    color: #777777;
    cursor: pointer;
    display: block;
    font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;
    font-size: 19px;
    height: 30px;
    line-height: 33px;
    padding: 5px 20px;
    position: relative;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
    z-index: 20;
}
.ac-container label:hover {
    background: none repeat scroll 0 0 #FFFFFF;
}
.ac-container input:checked + label, .ac-container input:checked + label:hover {
    background: none repeat scroll 0 0 #C6E1EC;
    box-shadow: 0 0 0 1px rgba(155, 155, 155, 0.3), 0 2px 2px rgba(0, 0, 0, 0.1);
    color: #3D7489;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}
.ac-container label:hover:after, .ac-container input:checked + label:hover:after {
    background: url("../images/arrow_down.png") no-repeat scroll center center transparent;
    content: "";
    height: 24px;
    position: absolute;
    right: 13px;
    top: 7px;
    width: 24px;
}
.ac-container input:checked + label:hover:after {
    background-image: url("../images/arrow_up.png");
}
.ac-container input {
    display: none;
}
.ac-container article {
    -moz-transition: height 0.3s ease-in-out 0s, box-shadow 0.6s linear 0s;
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5);
    height: 0;
    margin-top: -1px;
    overflow: hidden;
    position: relative;
    z-index: 10;
}
.ac-container article p {
    color: #777777;
    font-size: 14px;
    font-style: italic;
    line-height: 23px;
    padding: 20px;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}
.ac-container input:checked ~ article {
    -moz-transition: height 0.5s ease-in-out 0s, box-shadow 0.1s linear 0s;
    box-shadow: 0 0 0 1px rgba(155, 155, 155, 0.3);
}
.ac-container input:checked ~ article.ac-small {
    height: 140px;
}
.ac-container input:checked ~ article.ac-medium {
    height: 180px;
}
.ac-container input:checked ~ article.ac-large {
    height: 230px;
}

demodownload

查看更多：http://tympanus.net/codrops/2012/02/21/accordion-with-css3/