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

関連記事

カレンダー実装プラグイン「Bootstrap Calendar」

「Bootstrap Calendar」はBootstrap 3ベースでカレンダーが実装できるjQueryプラグインです。 ダウンロード スクリプト

no image

クリックするとテキストボックスにかわるラベルを実装

Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいです

no image

エフェクト豊富なニュースティッカー用プラグイン「inewsticker」

「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード エフェクトには、fade/slide/typingの3つが可能です。 デ

ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン

画像ギャラリーを作成してくれるjQueryプラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。 サムネ

画像ズーム プラグイン

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

わずかなコードで画像をサムネイル化してくれる「MyThumbnail.js」

サムネイル化してくれるJQueryプラグインは数多くありますが、この「MyThumbnail」はわずか数行で簡単にページ上の画像を指定サイズにサムネイル化してくれます。 ダウンロード 画像とし

レスポンシブに対応したテーブルを実装できる「FooTable」

「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード #v2にアップデートされたため刷

no image

時刻入力に便利な「Timepicker for Bootstrap」

「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 2014/06/16 Bootstrap3対応版に書き換え

マウスオーバーでキャプション表示してくれる プラグイン

画像マウスオーバーするとキャプションを出現させるプラグイン (jQuery 1.10.2で動作確認のできたものに限定しています。デモ一覧) imgタグの#alt属性から自動でキャプションを生成

シンプルにモーダルウィンドウを実装できる「leanModal」

「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま

Comment

Message

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

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑