设计折叠面板

HTML

<div class="accordion">
    <h2>我爱买</h2>
    <div id="one" class="section">
        <h3> <a href="#one">爱逛</a> </h3>
        <div><img src="images/11.png"></div>
    </div>
    <div id="two" class="section">
        <h3> <a href="#two">爱美丽</a> </h3>
        <div><img src="images/22.png"></div>
    </div>
    <div id="three" class="section">
        <h3> <a href="#three">爱吃</a> </h3>
        <div><img src="images/33.png"></div>
    </div>
</div>
    					

CSS

.accordion {
    background: #eee;
    border: 1px solid #999;
    margin: 2em;
} 
.accordion h2 {
    margin: 0;
    padding: 12px 0;
    background:#CCC
}
.accordion .section {
    border-bottom: 1px solid #ccc;
    background: #fff;
}
.accordion h3 {
    margin:0;
    padding:0;
    background: #eee;
    padding:3px 1em;
}
.accordion h3 a {
    font-weight: normal;
    text-decoration:none;
}
.accordion :target h3 a { font-weight: bold; }
.accordion h3 + div {
    height: 0;
    padding:0 1em;
    overflow: hidden;
    -webkit-transition: height 0.3s ease-in;
    transition: height 0.3s ease-in;
}
.accordion h3 + div img { margin:4px; }
.accordion :target h3 + div {
    height:300px;
    overflow:auto;
}