vcollapse是一个非常简单和轻量级的jQuery插件，用于通过平滑的转换扩展和折叠内容。

它包括可定制的选项，允许您更改过渡速度、缓和和其他方面，以满足您的特定需求。

如果你正在寻找一个jQuery内容切换插件来在你的网站上创建FAQ手风琴或剧透，那么jQuery vcollapse插件是一个很好的解决方案。

如何使用它:

1.要开始，请下载并导入jQuery vcollapse插件，如下所示：

import "pfkl-vcollapse/vcollapse/vcollapse.min.js";

<!-- OR -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/vcollapse.js"></script>

2.将内容切换和内容面板添加到网页中。

<div class="example">
  <div class="vcollapse-toggle" data-target="#cc1">Collapse 1</div>
  <div class="vcollapse-content" id="cc1">
    <p>Content 1</p>
  </div>
<div class="vcollapse-toggle" data-target="#cc2">Collapse 2</div>
  <div class="vcollapse-content" id="cc2">
    <p>Content 2</p>
  </div>
<div class="vcollapse-toggle" data-target="#cc3">Collapse 3</div>
  <div class="vcollapse-content" id="cc3">
    <p>Content 3</p>
  </div>
</div>

3.初始化插件，根据您刚才提供的内容创建一个手风琴式UI。

$('.example').vCollapse({
  // options here
})

4.确定是否允许用户同时打开多个面板。默认值：false。

$('.example').vCollapse({
  'any': true,
})

5.配置动画速度。默认值：300。

$('.example').vCollapse({
  'speed': 500,
})

6.对展开/折叠动画应用缓和功能。

$('.example').vCollapse({
  'easing': 'ease-in-out',
})

7.确定页面加载时应打开的内容面板：integer|'all'|'none'。

$('.example').vCollapse({
  'onLoad': 'all',
})

预览截图

平滑过渡展开/折叠内容 jQuery vcollapse