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

関連記事

テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」

「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点 チェックまで限定してくれます。ダウンロード スクリプト

画像ギャラリーを実装できる「Galleria」

Galleriaは、わずか数行で画像ギャラリーが作成できるjQueryプラグインです。Airbnbのページで使用されていて、コレいいな~と思い試してみました。 ナビゲーション内にサムネイルを

no image

色々なタイプの画像ギャラリーが実装できる「Rondell」

「Rondell」は、様々なタイプの画像ギャラリーを実装してくれるjQueryプラグインです。 カルーセル・スライダー・ギャラリーなど一通り実装可能です。 ダウンロード 本家デモ

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

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

タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」

「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。 デフォルトでは、768

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

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

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

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

カルーセル プラグイン

「カルーセル(Carousel)」とは"回転木馬"という意味らしいのですが、jQuery(Javascript)では画像やコンテンツをスライド表示させるもののようです。が、スライダーとの違いはよく分り

no image

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

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

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

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

Comment

Message

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

*

PAGE TOP ↑