memo-memo

今回試してみたプラグインは、myAccordionです。
配布サイトは、こちら。

このプラグインは、配布サイトに、使い方が一切かかれていません。ただ、そんなに使うのは難しく無かったです。

html

 <div id="myAccordion">
<!-- Element -->
<div class="myAccordion-declencheur"><p>その１</p></div>
<div class="myAccordion-content">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<!-- /Element -->
<!-- Element -->
<div class="myAccordion-declencheur"><p>その２</p></div>
<div class="myAccordion-content">
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
</div>
<!-- /Element -->
</div>

まずhtmlは、上記のように全体を、myAccordionというidを付けたdivタグで括ります。その中に、アコーディオンで表現したい見出しと、本文を書いていきます。

上記の場合、グリーン、ブルーの部分が、各々アコーディオンで表現される部分です。

で、次は、javascriptです。

javascript

$(function() {
	$("#myAccordion").myAccordion({
		speed: "fast", // @param : low, medium, fast
		defautContent: 0 // @param : number
	});
});

こんな感じで、呼び出します。（ダウンロードした、プラグイン本体と、cssは、別途読み込みます。）

パラメータも、今回は2つしかないようです。

赤字の「speed」は、文字通り、アコーディオンが、開いたり閉じたりするスピードの調整です。

青字の「defautContent」は、ブラウザに表示されたときに、一番最初に開いている項目です。

上記のhtmlの場合、「defautContent:0」を指定した場合、グリーンの部分が、一番最初に開いた状態で、ブラウザに表示されます。

付属のcssも、非常にシンプルなので、自分のサイトに合わせて、カスタマイズしやすそうです。