縦型アコーディオンメニュー accordion menu

縦型のアコーディオンメニューを実装するためのライブラリです。
同ページ内にでの複数設置に対応しています。

  • menu1
    • menu1-1
    • menu1-2
    • menu1-3
  • menu2
    • menu2-1
    • menu2-2
    • menu2-3
  • menu3
    • menu3-1
    • menu3-2
    • menu3-3
  • menu1
    • menu1-1
    • menu1-2
    • menu1-3
  • menu2
    • menu2-1
    • menu2-2
    • menu2-3
  • menu3
    • menu3-1
    • menu3-2
    • menu3-3

ライブラリのダウンロードと設置

「ライブラリのダウンロード」をクリックしてダウンロードしてください。
ライブラリのダウンロード

ダウンロードしたjquery.accordion.jsを任意の場所へ置き読み込みます。
（jQueryの設置および読み込みは、完了もしくは同時作業を行っているものとします。）

インスタンスの生成と表示

引数に設定内容を入れインスタンスを生成します。
設定内容はオプションを参考にしてください。

JavaScript

HTML

サンプルでは開閉する要素にul要素として書かれていますが、JavaScript側で指定を自由に変更できますので、以下のように要素側もdivなど自由に変更して問題ありません。

JavaScript

HTML

オプション

以下の設定が可能です。

設定 初期値 説明
controlElement '' アクションを起こす対象の要素（必須）
contentElement '' 展開をする要素（必須）
addClassElement 'this' 開閉したときのCSSクラス名を適用する要素
設定できる値：
    element自身='this'、
    controlElement要素='control'、
    controlElementの親要素='control-parent'、
    contentElement要素='content'、
    contentElementの親要素='content-parent'、
    jQueryオブジェクト、
    要素名
actionEvent 'click' 開閉アクションイベント
設定できる値：
    クリックで開閉='click'、
    マウスオーバーて開く、マウスアウトで閉じる='mouseover'
focusAction true フォーカスにでアクションするかどうか
設定できる値：有効=true、無効=false
startOpenIndex 'all-close' ページの読み込み時に、最初に表示する要素のインデックス番号
設定できる値：
    すべての要素を閉じる='all-close'、
    すべての要素を開く='all-open'、
    インデックス番号
closedClassName 'closed' 閉じている状態のCSSクラス名
openedClassName 'opened' 開いている状態のCSSクラス名
animationFx 'slide' アニメーションの効果
設定できる値：
    スライド='slide'、
    瞬時='direct'、
    無効（CSSアニメーション時に使用）='css'、
    無効='none'
animetionSpeed 300 アニメーションの速度
animetionEasing 'swing' アニメーションのイージング
autoClose true 開いた要素以外の要素を自動的に閉じるかどうか
設定できる値：閉じる=true、閉じない=false
openedCloseMode true アクションを起こした時、開閉する要素が開いている場合に閉じるかどうか
設定できる値：閉じる=true、閉じない=false
openOnly false 開く専用（閉じる処理無効）
設定できる値：有効=true、無効=false
cssMode false CSSで開閉を実装するかかどうか
設定できる値：有効=true、無効=false
onChange null 開閉切り替え時に実行する関数

次のコード例では最初に表示する要素のインデックス番号を変更しています。

JavaScript

メソッド

次のメソッドが実行可能です。

メソッド 説明
$element.accChange(index, callback) 第一引数で指定したインデックス番号を持つ要素を現在の状態に応じて開いたり閉じたりを交互に行う。
第二引数にコールバック関数を指定する（任意）。
accOpen(index, callback) 第一引数で指定したインデックス番号を持つ要素を開く。
第一引数を指定しなかった場合はすべての要素を開く。
第二引数にコールバック関数を指定する（任意）。
$element.accClose(index, callback) 第一引数で指定したインデックス番号を持つ要素を閉じる。
第一引数を指定しなかった場合はすべての要素を閉じる。
第二引数にコールバック関数を指定する（任意）。
$element.destroy() 機能の破棄。
$element.getId() 付与されているユニークIDを取得。

【例】

JavaScript