クリックで開閉するアコーディオンメニュー「rlAccordion」
当ページのリンクには広告が含まれています。
スポンサーリンク
クリック操作で開閉するアコーディオンメニューを簡単に作成するプラグイン「rlAccordion」を紹介します。
jQueryプラグイン「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>
スポンサーリンク