要素を折りたたみできる「nestedAccordion」

「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこちら

スクリプト

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.nestedAccordion.js" type="text/javascript"></script>

実装

<ul id="div808" class="accordion">
  <li class="new shown"><h4>要素1を展開</h4><div class="inner">要素1</div></li>
  <li class="new shown"><h4>要素2を展開</h4><div class="inner">要素2</div></li>
  <li class="new shown"><h4>要素3を展開</h4><div class="inner">要素3</div></li>
</ul>

<script type="text/javascript">
$("html").addClass("js");
$(function() {
  $("#div808").accordion({
    container: false,  // 親親要素を設定しない。
    el: ".h",          // 展開用リンクの要素クラス
    head: "h4",        // 展開用リンクの要素
    next: "div",       // 展開する要素
    initShow : "div.outer:first",  // 先頭の要素を初期状態で展開
  });
  $("html").removeClass("js");
});
</script>

オプション

主なものです。詳細は、jsファイル内にありますのでそちらを参照。

オプション名	値(デフォルト)	説明
el	"li"	開閉のトリガーとなるリンクの親要素のクラス名 (デモだとclass="h"が自動で付与されるのが?)
head	デモではh4	開閉のトリガーとなるリンクの要素
next	'ul', 'ol', 'div'	開閉する要素
initShow	"div.outer:first"など	初期状態で展開しておく要素
event	"click"(デ) "hover"	"click"：クリックすると開閉を行う。 "hover"："click"に加えて、マウスオーバーだけで開閉を行う。
collapsible	true(デ) false	true：全てを閉じた状態にできる false：どれかひとつを常に開いた状態にしておく
shift	false(デ) 'clicked' 'all'	要素の移動 false：移動しない 'clicked'：クリックされた要素が先頭に移動する 'all'：展開対象の要素が先頭に移動し、残りが元の順番に並ぶ。

今回はできるだけ構造をシンプルにしようと思いオプションをいろいろいじりました。ul/liだけでなくdivでもできます。

デモ

こちら

他プラグイン
Bootstrap Collapse
Easy Accordion - 左右(横)に開閉するアコーディオン

: 実装方法が選べるツールチップ用プラグイン「Smallipop」

Smallipopは、ツールチップの実装をマークアップベース(HTMLに書き出し)とJavascriptベース両方で行えるjQueryプラグインです。世の中この手のツールは結構片方でのみだったりします

: ページの画像を非同期で読み込んでくれる「Lazy Load」

「LazyLoad Plugin」は、画像をページのロード時ではなく非同期に読み込んでくれるjQueryプラグインです。設定によりスクロールした際に画像をロードしたりしてくれます。ダウンロード |

: iTunesのCover Flowのようなギャラリーが実装できる「ContentFlow」

「ContentFlow」は、iTunesのCover Flowのように左右に流れるギャラリーが実装できるjQueryプラグインです。ダウンロードスクリプト実装

: jqPlot - Legend(凡例) オプション

jqPlotの凡例(Legend)の設定オプションのまとめです。前提は、こちらを参照して下さい。目次凡例を表示凡例の位置 [location, placement] 凡例のフォ

: クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」

「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を