要素を折りたたみできる「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 - 左右(横)に開閉するアコーディオン
  • このエントリーをはてなブックマークに追加

関連記事

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

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

画像ズーム プラグイン

画像をズームしてくれるプラグインには、ツールチップ的にサムネイルにマウスオーバーした部分をズームアップしたり元画像を表示したり、その画像内でインナーズームする というような機能があるようです。

no image

テーブル・リスト要素を便利にしてくれるプラグイン

レスポンシブに対応したテーブルを実装できる「FooTable」 リストをインクリメント検索・ソートできる「List.js」 colResizable #カラム幅可変

no image

数値入力に便利なステッパーを実装「Numeric Stepper」

「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas

商用利用フリー Lightbox プラグイン

商用利用フリー(投稿時)のlightbox用プラグインをまとめてみました。最新のライセンスに関しては各サイトに確認をお願いいたします。) lightboxの中にもギャラリー表示が可能なもの、ギャラリ

様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ)

Webページにグラフ表示する機会があったので、探してみました。 今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際

レスポンシブに対応した画像ギャラリーが実装できる「Responsive Image Gallery」

「Responsive Image Gallery with Thumbnail Carousel」はレスポンシブにも対応した画像ギャラリーが実装できるjQueryプラグインです。Twitterの「最

no image

「jqPlot」を使って棒グラフを作成

jqPlotを使って棒グラフを作成してみました。ベースはこの記事を参照ください。 スクリプト jqPlotのベースとなるjsファイルと以下の棒グラフの作成に必要なスクリプトを読み込んで下さい。

no image

シンプルな画像スライダー/ギャラリー用プラグイン

スライダーやギャラリーを実装できるjQueryプラグインのうちシンプルなものを集めてみました。ベースはシンプルですが、オプションなどを使用してカスタマイズが豊富なものもたくさんありますね。 シン

マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」

「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら スクリプト

Comment

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

PAGE TOP ↑