要素を折りたたみできる「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 - 左右(横)に開閉するアコーディオン
関連記事
-
タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」
「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。 デフォルトでは、768
-
Amazonのような画像ズーム機能が実装できる「SergeLand Image Zoomer」
「SergeLand Image Zoomer v3.0」はAmazonなどでみられるマウスオーバーで画像をズームしてくれる機能を実装できるjQueryプラグインです。 ダウンロード *黄色ボタン
-
ナビゲーションメニューを画面サイズによってドロップダウンにしてくれる「TinyNav.js」
「TinyNav.js」はナビゲーションメニューを画面サイズがある以下になるとドロップダウンにしてくれるjQueryプラグインです。 スクリプト 実装 スタイルシート
-
画像ギャラリーを実装できる「Galleria」
Galleriaは、わずか数行で画像ギャラリーが作成できるjQueryプラグインです。Airbnbのページで使用されていて、コレいいな~と思い試してみました。 ナビゲーション内にサムネイルを
-
定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」
PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや
-
[続きを読む]でテキストを省略、開閉できる「jTruncate」「jTruncSubstr」
「jTruncate」は、長くなってスペースをとってしまう文章をなどであらかじめ指定した文字数で省略して表示してくれるjQueryプラグインです。 ダウンロードはこちら デモ スクリプト
-
親要素の大きさに合わせて画像をリサイズ「imgLiquid」
「imgLiquid」は親要素の大きさに合わせて画像を縮小・切り取りを行ってくれるjQueryプラグインです。 ダウンロードはこちら スクリプト 実装
-
画像をモザイク処理(ピクセル化)してくれるプラグイン「Pixelate.js」
「Pixelate.js」はその名の通り画像をピクセル化してくれるjQueryプラグインです。画面ロード時にピクセル化しておき、画像にマウスオーバーすると暴露してくれます。 ダウンロード | デモ
-
入力されたメールアドレスのドメインをサジェストしてくれる「mailcheck.js」
「mailcheck.js」は、入力されたメールアドレスのドメインをサジェストしてくれるjQueryプラグインです。 ダウンロード スクリプト 実装 v
-
様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ)
Webページにグラフ表示する機会があったので、探してみました。 今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際
- PREV
- Flickr API Keyの取得
- NEXT
- U様向け ご提案
Comment
ワードプレス