本实例通过对radio按钮的状态判断来实现折叠效果。主要应用的是兄弟元素选择器~，注意这个兄弟元素选择器只选择后面的兄弟元素，对于同级的前面的兄弟元素css3还没有响应的选择器。然后综合应用:before和transition来实现前面图标的切换及高度的伸展动画。这个高度的伸展变化必须设置一个具体的值，如为auto则没有transition动画效果，只是切换而已。

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

本实例主要是对css3的:target这个选择器的应用，通过:target这个状态来改变需要改变的元素。主要就是在设计html结构的时候得想一下，各个点击的href值对应各自要展开内容的id值。最有可能迷惑的就是:target这个选择器的运用，刚接触的时候还是有些晕的，多看看理解理解就好了。

Accordion Slider 以前都是使用jQury或别的js脚本来制作，今天我们给大家展示一个纯CSS3实现的水平手风琴幻灯片播放的效果。这个效果有两个关键之处，第一是HTML结构中的input[type="radio"]是必备的，第二是样式通过radio的选中与未选中来控制对应的img显示和隐藏。这里采用的是css的兄弟元素选择器（~），这个是一个很好的应用。当然实现这种效果还可以通过“target”来实现，不过这种方法实现要借助js来显示默认的第一张图片，有兴趣的可以将这个案例改装一下。