skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

お手軽アコーディオンJavaScript「myAccordion - plugin jQuery」

｜ ｜ ｜ ｜ ｜ ｜ ｜

アコーディオンをお手軽に導入できるJavaScript「myAccordion - plugin jQuery」です。
これでコンテンツを収納できるようになります。

使用方法
myAccordion - plugin jQueryからファイルをダウロードします。
<link rel="stylesheet" type="text/css" href="myAccordion.css">
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="myAccordion.js"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$("#id名").myAccordion({
speed: "fast", // low, medium, fast
defautContent: 1 // 最初に開いている場所
});
});
</script>

あとは上記で記述したid名で以下のようにアコーディオンを記述します。
<div id="myAccordion">
<!-- エレメント -->
<div class="myAccordion-declencheur">アコーディオンタイトル</div>
<div class="myAccordion-content">
アコーディオンコンテンツ
</div>
<!-- エレメント1個分ここまで -->
</div>

お手軽アコーディオンJavaScript「myAccordion - plugin jQuery」サンプル

記事作成：2009年03月03日

前の記事：背景画像にトランジション効果をつけられるJavaScript「BGTransition」
次の記事：ALTでキャプションをふわりと表示：jQueryプラグイン「jCaption」