[JS]WordPressにも最適！シンプルなHTMLをさくっとアコーディオンにしてしまうスクリプト -Magic Accordion

サイト構築 -JavaScript

Post on:2014年9月25日

sponsorsr

h2の見出し、コンテンツ（テキストや画像）、h2の見出し、コンテンツ（テキストや画像）、、、と実装されたシンプルなHTMLをアニメーションで開閉するアコーディオンにするjQueryのプラグインを紹介します。

↓上の赤いボタンは切替で、見出し付きのコンテンツをアコーディオンにしています。
「Some amazing header」「And yet another」が見出しです。

Magic Accordion
Magic Accordion -GitHub

Magic Accordionのデモ
Magic Accordionの使い方

Magic Accordionのデモ

スクリプトのコンセプトは、WordPressなどのCMSで簡単に利用できるようシンプルなコードからアコーディオンが生成できるよう設計されています。

デモは上部に切替ボタンがあり、見出し付きコンテンツの状態、それをアコーディオンにした状態を切り替えることができます。

デモ：見出し付きのコンテンツ

デモ：アコーディオン化

Magic Accordionの使い方

Step 1: 外部ファイル

当スクリプトとjquery.jsを外部ファイルとして記述します。

<head>
  ...
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="/assets/js/jquery.magic-accordion.min.js"></script>
</head>

Step 2: HTML

見出しとコンテンツが1セットで、それらをdivなどのラッパーで包みます。
こういったHTMLであれば、CMSでも無問題でしょう。

<div class="content">
  <h2>見出し</h2>
  <p>パラグラフ</p>

  <h2>見出し</h2>
  <p>パラグラフ</p>

  <h2>見出し</h2>
  <p>パラグラフ</p>
  <ul>
    <li>リスト</li>
    <li>リスト</li>
  </ul>
  <p>パラグラフ</p>

</div>

Step 3: JavaScript

ラッパーをjQueryのセレクタで指定し、スクリプトを実行します。
アコーディオンに利用する見出し（h2）や開閉のアニメーションなどは変更できます。

$('.content')
.on( 'created.magic', function(e){
    for( i in e.sections ) {
		var section = e.sections[i];
		section.heading.prepend( '<i class="fa fa-chevron-circle-down"></i>' );
	}
})
.on( 'opened.magic', function(e){
    console.log( e.body );
})
.on( 'closed.magic', function(e){
    console.log( e.head );
}).magicAccordion({
    headingTag  : 'h2',
    bodyClass   : 'body',
    headClass   : 'head',
    activeClass : 'active',
    speed       : 200
});

カラーやサイズなどを変更する場合は、bobyClassとheadClassとactiveClassでアコーディオンのエレメントのclassを定義できるので、スタイルシートで簡単に変更することができます。