【jQuery】シンプルなCSS3カードアコーディオン。PAPER COLLAPSE

PAPER COLLAPSEはGoogleのマテリアルデザインからインスピレーションを受けて作られた、シンプルなCSS3カード型アコーディオンプラグイン。

CSS

<link rel="stylesheet" href="../paper-collapse.min.css">

JS

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="../paper-collapse.min.js"></script>

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> <!-- Title Text -->
</div>
</div>
<div class="collapse-card__body">
<!-- Body Text -->
</div>
</div>

Settings

$(function () {
$('.collapse-card').paperCollapse()
})

Options

animationDuration アニメーションの継続時間
easing アニメーション内の異なるポイントで進行する速度を指定
closeHandler CSSクラスまたはID
onShow 表示の開始アニメーショントリガ
onHide 非表示の開始アニメーショントリガ
onShowComplete 表示の完了アニメーショントリガ
onHideComplete 非表示の完了アニメーショントリガ
 
papper-collapse

【jQuery】シンプルなCSS3カードアコーディオン。PAPER COLLAPSE

  • LATEST
  • RELATED
  • POPULAR