今日の人気記事

  1. ExcelのようにTableが編集できちゃう「Handsontable」
  2. テキスト・画像・iframeなどに対応したLightbox「Featherlight」
  3. テーブルにページャーを「PaginateMyTable」
  4. イベントを表示するカレンダーを実装「kalendar」
  5. 複数のpdfファイルをWebサイトに「pdfSlider」 - jQueryプラグイン

クリックで開閉するアコーディオンメニュー「rlAccordion」

スポンサーリンク

クリック操作で開閉するアコーディオンメニューを簡単に作成するプラグイン「rlAccordion」を紹介します。

jQueryプラグイン「rlAccordion」

アコーディオンメニューは「タイトル」と「コンテンツ」で構成されています。タイトルをクリックすると、そのタイトルに付随するコンテンツが開き(表示され)、その他のコンテンツは閉じます(非表示になります)。

またタイトルの右端には「+」あるいは「-」マークが付いています。コンテンツが開いている場合は「-」マーク、閉じている場合は「+」マークが付くようになっています。

スポンサーリンク

デモのアコーディオンメニューを体感してみてください。タイトルをクリックすれば、コンテンツが開閉します。

「rlAccordion」のデモ

ソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>rlAccordion - jQueryプラグインまとめのカルマ</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="rlaccordion.js"></script>
<script>
$(function() {
	$("#first").rlAccordion();
});
</script>
<style>
.rlAccordion > h3 + div {
    display: none;
}
</style>
</head>
<body>
<h1>rlAccordionのデモでーす</h3>

<div id="first">

<h3>アコーディオン①</h3>
<div>
あああああああああああああああああああああ
</div>

<h3>アコーディオン②</h3>
<div>
いいいいいいいいいいいいいいいいいいいい
</div>

<h3>アコーディオン③</h3>
<div>
うううううううううううううううううう
</div>

<h3>アコーディオン④</h3>
<div>
えええええええええええええええ
</div>

<h3>アコーディオン⑤</h3>
<div>
おおおおおおおおおおおおおおお
</div>

</div>

</body>
</html>
スポンサーリンク

関連記事(一部広告含む)