今日の人気記事

  1. レスポンシブなメニューを作成「MeanMenu」
  2. テーブルやリストから文字列を検索「QuickSearch」
  3. 指定した要素を更新(変更)する「Refreshing an element at a set time interval」
  4. アニメ効果付きの円グラフを作成「Circliful」
  5. カウントダウン作成「Countdown」マルチ言語対応

クリックで開閉するツリー・アコーディオン リストを実装 「Sapling」

スポンサーリンク

クリックで開閉するツリー・アコーディオン リストを実装するプラグイン「Sapling」を紹介します。

jQueryプラグイン「Sapling」

このプラグインを使えば、HTMLリストタグ(li)からクリックで開閉するアニメーション効果付きのツリー・アコーディオン リストを簡単に作成することができます。

クリックアクションでツリー・アコーディオンの子要素が表示 / 非表示されます。また、オプションを使えば、すべてのリストを開く / 閉じる こともできるので、便利です。

スポンサーリンク

デモでは、ツリーリストを紹介しています。ご覧ください。

「Sapling」のデモ

デモのソース(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

スポンサーリンク

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