クリックで開閉するツリー・アコーディオン リストを実装 「Sapling」
当ページのリンクには広告が含まれています。
スポンサーリンク
クリックで開閉するツリー・アコーディオン リストを実装するプラグイン「Sapling」を紹介します。
jQueryプラグイン「Sapling」
このプラグインを使えば、HTMLリストタグ（li）からクリックで開閉するアニメーション効果付きのツリー・アコーディオン リストを簡単に作成することができます。
クリックアクションでツリー・アコーディオンの子要素が表示 / 非表示されます。また、オプションを使えば、すべてのリストを開く / 閉じる こともできるので、便利です。
スポンサーリンク
デモでは、ツリーリストを紹介しています。ご覧ください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="Saplingのデモでーす。">
<title>Sapling - jQueryまとめのカルマ</title>
<link rel="stylesheet" href="jquery.sapling.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.sapling.min.js"></script>
<script>
$(document).ready(function() {
$('#demoList').sapling();
$('#expandAll').click(function() {
$('#demoList').data('sapling').expand();
});
$('#collapseAll').click(function() {
$('#demoList').data('sapling').collapse();
});
});
</script>
</head>
<body>
<h1>Saplingのデモでーす。</h1>
クリック → <a id="expandAll" href="#">リストをすべて開く</a><br />
クリック → <a id="collapseAll" href="#">リストをすべて閉じる</a>
<ul id="demoList">
<li>リスト①
<ul>
<li>さぶ</li>
<li>さぶさぶ
<ul>
<li>さぶさぶさぶ</li>
<li>さぶさぶさぶ</li>
</ul>
</li>
</ul>
</li>
<li>リスト②
<ul>
<li>さぶ</li>
<li>さぶ</li>
</ul>
</li>
<li>リスト③
<ul>
<li>さぶ</li>
<li>さぶ</li>
</ul>
</li>
</ul>
</body>
</html>
jsファイルのダウンロード、オプションやアコーディオンの実装方法など、その他の詳細はこちらからどうぞ。
» Sapling
スポンサーリンク