用css完成简易手风琴效果，可以利用锚点链接来切换显示的色块。
a标签为按钮，用来控制哪个盒子拉出
要想用transition增加动画效果需要给盒子初始高度为0，就会有缓慢下拉动画效果。
<style>
.box {
margin: 50px auto;
width: 500px;
height: 600px;
border: 1px solid #000;
}
#box1,
#box2,
#box3 {
height: 0;
}
a {
display: block;
width: 100%;
height: 40px;
background: #000;
color: #fff;
text-align: center;
line-height: 40px;
text-decoration: none;
}
#box1:target {
width: 100%;
height: 450px;
background: pink;
transition: 1s;
}
#box2:target {
width: 100%;
height: 450px;
background: green;
transition: 1s;
}
#box3:target {
width: 100%;
height: 450px;
background: skyblue;
transition: 1s;
}
</style>
</head>
<body>
<div class="box">
<a href="#box1">1</a>
<div id="box1"></div>
<a href="#box2">2</a>
<div id="box2"></div>
<a href="#box3">3</a>
<div id="box3"></div>
</div>
效果图
