jQuery

【JS】かっこいいアコーディオンをスマホサイトにいかがですか?

paper-collapse

今回は、開き方が個人的に好きなアコーディオンのjQueryプラグイン【PAPER COLLAPSE】のご紹介です。

特にこれといって、ものすごく良い機能などはなくシンプルなアコーディオンのjQueryプラグインなのですが、開き方やデフォルトのデザインが個人的にかっこいいなーと思ったので、自分用の備忘録としてもここに残しておきたいと思います。
実装も正直簡単で、デフォルトのデザインで全然問題ないと思うので、スマホサイトでも全然使えるプラグインだと思います。

実際にこちらのjQueryプラグイン【PAPER COLLAPSE】を使ったデモサイトも用意しましたので、ご参考下さい。

デモサイト

実際にこちらのプラグインを使ってみた感想ですが、実装に関しては全く問題なくすんなりと実装出来ました。
ただ、一つ上げるとしたら、HTML側でのdiv要素が多いかなーと思いました。
その他は問題なかったし、デフォルトのデザインもいい感じですし、好みでCSSを上書きまたは書き換えて好みのレイアウトに変更も簡単に出来ます。

デモサイトで利用しているアイコンフォントは【Font Awesome】を利用しています。 Font Awesomeの使い方に関しては、こちらの記事をご覧ください。

実際に利用する場合は、【PAPER COLLAPSE】から必要ファイルをダウンロードして下さい。

PAPER COLLAPSE

PAPER COLLAPSE使い方

それでは、【PAPER COLLAPSE】を使い方を説明していきたいと思います。 実装するにあたり上記より必要なファイルなどをダウンロードして下さい。

必要ファイルの読み込み

まずは、jQuery本体と上記でダウンロードした【paper-collapse.min.css】【paper-collapse.min.js】をhead内に読み込んで下さい。 下記の読み込み時のファイルの階層などは、ご自身の環境に合わせて変更して下さい。

<link rel="stylesheet" href="css/paper-collapse.min.css" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/paper-collapse.min.js"></script>

HTML

それでは、次にHTMLの準備をしていきます。
少しdiv要素が多いですが、【.collapse-card__title】内に見出しテキストを入力し【.collapse-card__body】に開いた時に表示されるテキストを入力します。

<div class="collapse-card">
  <div class="collapse-card__heading">
    <div class="collapse-card__title">
      <i class="fa fa-plus fa-2x fa-fw"></i>
      見出し
    </div>
  </div>
  <div class="collapse-card__body">
    テキスト
  </div>
</div>

JavaScript

次に上記HTMLコードに記述したクラス名【collapse-card】を指定します。

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

上記まで記述をしたら実装の完了となります。
ファイル自体も超軽量なので、スマホサイトなどのスペース確保としても使えると思います。

デモサイト

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS animsition

jQueryプラグインWebページに58種類のエフェクト効果を実装

NEXT parallax

CSSとHTMLだけで背景画像を固定しパララックスっぽくしてみる