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

当ページのリンクには広告が含まれています。

jQuery Plugin » メニュー » クリックで開閉するアコーディオンメニュー「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>

rlAccordion

jQueryプラグイン「rlAccordion」

ソース（HTML + jQuery）

関連記事（一部広告含む）