Magic Accordion jQuery插件提供了一个简单、自动的解决方案，用于从现有页面内容生成平滑的垂直手风琴

它智能地转换标题（默认值：<h2>)转换为可折叠的标题，并将其下方的元素转换为可伸缩的主体，这有助于开发人员以用户友好的方式组织和显示信息。

非常适合常见问题解答、博客文章或多节文章、教程或分步指南等。

如何使用它:

1.将Magic Accordion的脚本插入到您的jQuery项目中。

<script src="/path/to/cdn/jquery.min.js"></script>&#13;
<script src="/path/to/jquery.magic-accordion.js"></script>&#13;

2.在您的内容容器上调用插件。

<div class="faq">&#13;
  <h2>Accordion 1</h2>&#13;
  ... Accordion 1 Content ...&#13;
&#13;
  <h2>Accordion 2</h2>&#13;
  ... Accordion 2 Content ...&#13;
&#13;
  <h2>Accordion 3</h2>&#13;
  ... Accordion 3 Content ...&#13;
</div>&#13;

$('.faq').magicAccordion({
  // options here
})


3.将CSS样式应用于手风琴。

.body { 
  /* accordion body */
}

.head { 
  /* accordion header */
}

.active {
  /* active styles */
}


4.指定页面加载时应打开的手风琴项目。默认值：1。

$('.faq').magicAccordion({
  openOnLoad: 2
})


5.自定义动画速度。默认值：200。

$('.faq').magicAccordion({
  speed: 500
})


6.确定是否自动更新URL中的标签。默认值：false。

$('.faq').magicAccordion({
  hashTrail: true,
})


7.更多插件选项。

$('.faq').magicAccordion({

  // selector of accordion header
  headingTag : 'h2',

  // default CSS classes
  bodyClass : 'body',
  headClass : 'head',
  activeClass : 'active',
  
  // easing function
  easing : 'linear',
  
})


8.事件处理程序。

$('.faq').magicAccordion({
  // options here
})
.on( 'opened.magic', function(e){
  console.log(e.head);
 }).on( 'closed.magic', function(e){
  console.log(e.body);
});


9.销毁并重新启动手风琴。

var app = $('.faq').data( 'magic-accordion' );

// destroy
app.unbind();

// re-init
app.rebind();