当你想在有限的页面空间内展示多个内容片段的时候，手风琴（Accordion）效果就显得非常有用，它可以帮助你以对用户非常友好的方式实现多个内容片段之间的切换。借助流行的 jQuery 框架，只需很少的代码就可以实现精美的手风琴效果，帮助你的网站吸引更多用户的眼球。   Elegant Accordion with jQuery and CSS3 首先推荐的这款插件是基于 jQuery 和 CSS3 实现的优雅的鼠标悬停手风琴效果。 [img]http://files.jb51.net/file_images/article/201208/201208221030372.jpg[/img] [url=http://tympanus.net/codrops/2010/04/26/elegant-accordion-with-jquery-and-css3/]制作教程[/url]　　[url=http://tympanus.net/Tutorials/ElegantAccordion/]在线演示[/url]   Vertical Sliding Accordion with jQuery 基于 jQuery 实现的垂直滑动的精美手风琴效果，可以通过箭头按钮进行切换。 [img]http://files.jb51.net/file_images/article/201208/201208221030373.jpg[/img] [url=http://tympanus.net/codrops/2011/07/22/vertical-sliding-accordion/]制作教程[/url]　　[url=http://tympanus.net/Development/VerticalSlidingAccordion/example1.html]在线演示[/url]   Grid Accordion with jQuery 这个是很特别的网格（Grid）手风琴效果，融合了水平和垂直两种滑动方式。 [img]http://files.jb51.net/file_images/article/201208/201208221030374.jpg[/img] [url=http://css-tricks.com/5994-grid-accordion-with-jquery/]制作教程[/url]　　[url=http://css-tricks.com/examples/InfoGrid/]在线演示[/url]   Making accordion menu using jquery 非常简单的一个 jQuery 手风琴菜单效果，是学习手风琴效果的基本示例。 [img]http://files.jb51.net/file_images/article/201208/201208221030375.jpg[/img] [url=http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html]制作教程[/url]　　[url=http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html]在线演示[/url]   Horizontal JavaScript Accordion 这是另外一款水平的手风琴效果，可以用于实现文本、图片等内容的平滑切换。 [img]http://files.jb51.net/file_images/article/201208/201208221030376.jpg[/img] [url=http://www.scriptiny.com/2008/05/horizontal-javascript-accordion-menu/]制作教程[/url]　　[url=http://www.scriptiny.com/2008/05/horizontal-javascript-accordion-menu/]在线演示[/url]   A Simple and Beautiful jQuery Accordion Tutorial 这款插件非常简单，但是效果很不错，有非常细的制作过程供学习。 [img]http://files.jb51.net/file_images/article/201208/201208221030377.jpg[/img] [url=http://www.queness.com/post/741/a-simple-and-beautiful-jquery-accordion-tutorial]制作教程[/url]　　[url=http://www.queness.com/resources/html/accordion/index.html]在线演示[/url]   Horizontal jQuery Accordion 这个是在实际使用中的 jQuery 手风琴效果，实现基于点击模式的水平切换。 [img]http://files.jb51.net/file_images/article/201208/201208221030378.jpg[/img] [url=http://www.gethifi.com/blog/tutorial-a-horizontal-jquery-accordion-using-custom-event-binding]制作教程[/url]　　[url=http://www.striving4more.org/]在线演示[/url]    Simple Accordion with CSS and jQuery 效果不错的手风琴效果，可以用于实现内容片段间的平滑切换。 [img]http://files.jb51.net/file_images/article/201208/201208221030379.jpg[/img] [url=http://viralpatel.net/blogs/2009/09/create-accordion-menu-jquery.html]制作教程[/url]　　[url=http://viralpatel.net/blogs/demo/jquery-accordion-menu-example/]在线演示[/url]   Create Accordions with CSS3, HTML5 and jQuery  结合 HTML5、CSS3 和 jQuery 实现的简洁风格的手风琴效果。 [img]http://files.jb51.net/file_images/article/201208/2012082210303710.jpg[/img] [url=http://css-plus.com/2011/08/create-accordions-with-css3-html5-and-jquery/]制作教程[/url]　　[url=http://css-plus.com/examples/2011/08/accordions-with-css3-html5-and-jquery/]在线演示[/url]   Making a Fresh Content Accordion 基于 jQuery 实现的非常时尚的手风琴效果，可以在项目中实际应用，也是学习的好例子。 [img]http://files.jb51.net/file_images/article/201208/2012082210303711.jpg[/img] [url=http://tutorialzine.com/2009/12/colorful-content-accordion-css-jquery/]制作教程[/url]　　[url=http://demo.tutorialzine.com/2009/12/colorful-content-accordion-css-jquery/demo.html]在线演示[/url]   jQuery Accordion Image Slider 常用的手风琴效果，水平方向的图片滑动，可以应用于实际项目中。 [img]http://files.jb51.net/file_images/article/201208/2012082210303712.jpg[/img] [url=http://www.aoclarkejr.com/tutorial-jquery-accordion-slider.html]制作教程[/url]　　[url=http://www.aoclarkejr.com/demos/accordion-slider.html]在线演示[/url]   Flexible Slide-to-top Accordion 非常灵活的滑动至顶部手风琴效果，适合内容比较多的应用场合。 [img]http://files.jb51.net/file_images/article/201208/2012082210303713.jpg[/img] [url=http://tympanus.net/codrops/2011/10/12/flexible-slide-to-top-accordion/]制作教程[/url]　　[url=http://tympanus.net/Tutorials/FlexibleSlideToTopAccordion/]在线演示[/url]