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

関連記事

カウントダウン プラグイン

FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipcountd

レスポンシブ対応の画像スライダー・ギャラリー用プラグイン

画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からレスポンシブ対応のものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlide

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

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

no image

[続きを読む]でテキストを省略、開閉できる「jTruncate」「jTruncSubstr」

「jTruncate」は、長くなってスペースをとってしまう文章をなどであらかじめ指定した文字数で省略して表示してくれるjQueryプラグインです。 ダウンロードはこちら デモ スクリプト

no image

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

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

ページ内のフォントサイズを変更してくれる「Text Resizer」

「jQuery Text Resizer Plugin」は、ページ内のフォントサイズを変更してくれるjQueryプラグインです。要素を限定してリサイズすることも可能です。jquery.cookie.j

シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」

「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション

no image

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

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

Bootstrap Modal + 拡張機能が実装できるプラグイン

Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 2014/06/16 Bootstrap3対応版に書き換えをしました。

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

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

Comment

Message

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

*

PAGE TOP ↑