お手軽アコーディオン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>

サンプル

Presentation

myAccordion est un plugin jQuery permettant de creer facilement une navigation en accordeon. Cette technique permet par exemple de structurer un menu ou une page presentant un contenu trop important.

Simplicite d'utilisation

L'ajout d'elements a myAccordion se resume a un simple ≪…opier-coller＝・de quelques lignes de HTML. myAccordion s'occupe de tout le reste !

e

La seule chose a respecter concerne le nom des classes CSS qui doit rester tel quel, ainsi que l'ordre des div ( Les declencheurs precedent leur contenu propre. Le tout, englobe dans un div portant un identifiant unique ).

Liberte

L'element contenu dans un declencheur peut contenir n'importe quelle balise HTML. Dans cet exemple, des titres de niveau 1 ont ete utilises.

myAccordion est entierement personnalisable via sa feuille de styles CSS.

Javascriptサンプルページ一覧
skuare.net