paper-collapse是一款谷歌Material Design风格卡片式手风琴特效的jQuery插件。该手风琴效果的每一个手风琴项都是一张卡片，点击时卡片会相应的伸展和收缩，时尚美观。

使用方法

使用该手风琴特效需要在页面中引入paper-collapse.css文件，jquery和paper-collapse.js文件。

<link rel="stylesheet" href="css/paper-collapse.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="paper-collapse.js"></script>
HTML结构

下面是该手风琴效果的基本HTML结构如下：

<div class="collapse-card">
  <div class="collapse-card__heading">
    <div class="collapse-card__title">
      <i class="fa fa-question-circle fa-2x fa-fw"></i>
      <!-- 标题文本-->
    </div>
  </div>
  <div class="collapse-card__body">
    <!-- 手风琴卡片中的文本内容 -->
  </div>
</div>
初始化插件

在页面DOM元素加载完毕之后，可以通过paperCollapse()方法来初始化该手风琴插件。

<script>
  $(function () {
    $(".collapse-card").paperCollapse();
  });
</script>

配置参数

paper-collapse手风琴插件的可用的配置参数如下：

参数 类型 默认值 描述
animationDuration number 400 动画的持续时间，单位毫秒。
easing string 'swing' 动画的easing效果，可选值有：'swing'或 'linear'
closeHandler string '.collapse-card__close_handler' 指定多个用于关闭卡片的class或id选择器
onShow function null 动画开始时show动作发生时的回调函数
onHide function null 动画开始时hide动作发生时的回调函数
onShowComplete function null 完成show动作后的回调函数
onHideComplete function null 完成hide动作后的回调函数

paper-collapse手风琴插件的github地址为：https://github.com/alexander-ruehle/paper-collapse