学习jQuery有一段时间了，进展甚慢。这段时间反复在学习手风琴的制作，从纯CSS的制作到jQuery的制作，在W3cplus和大家共享了多篇有关于制作手风琴效果的Blog。比如：
前一回我在《CSS3制作垂直手风琴》介绍了使用“:hover”来制作手风琴效果。今天，你将学习使用CSS3的另一个属性——:target来制作一个非常简单的动画手风琴的效果。在具体动手之前，我们一起来简单的了解一下这个“:target”。
说起手风琴的制作，大家肯定首选就是使用jQuery来制作，我在《如何使用jQuery制作手风琴效果》也简单的介绍了使用jQuery制作手风琴效果。但今天我在Saud Khan的《Cross Browser Pure CSS3 Vertical Accordion》中学习了一种使用纯CSS制作手风琴效果，稍加整理了一下，贴上来与大家一起分享。
上回在《如何使用jQuery制作手风琴效果》一文中介绍了使用jQuery制作垂直手风琴效果，今天我们一起在来看一个水平手风琴效果，如下图所示：
在这个例子中，我创建了一个水平手风琴效果，用来展开每个缩略图的提示内容。下面我们来看其具体是如何通过jQuery来实现。
上回在《如何使用jQuery制作展开和折叠切换面板》中介绍了如何使用jQuery的“.slideToggle”或“toggle(function)”来制作展开和折叠面板效果。今天主要在上文的基础上来使用jQuery来制作一个手风琴效果。手风琴的效果就是在我们上文中的展开与折叠效果上的基础上增加了一点特效。就是当你点击一个窗格展开，而同时其他的窗格折叠，具体效果可以点下面DEMO所示效果：
在这节中，我们主要来学习如何使用jQuery的.slideToggle()方法来制作显示和折叠的切换面板。当你点击标题时，与其相对应的相邻的主内容将会显示，当你在次点击此标题时，其对应的主内容又将会折叠起来。如下图所示：
实现上面的效果，对于jQuery来说是一件非常容易的事情，下面我们就一起看如何实现上图所展示的效果。
我们先来看看HTML Code
