アコーディオン

a-blog cmsでは、アコーディオン型のメニュー表示にする設定が標準で実装されています。(Ver.1.3.0より)

デモ

スタンダードライセンス
一般的なサイトに必要な機能が揃っている基本的なサイトを制作するためのライセンスです。
プロフェッショナル/エンタープライズライセンス
ユーザーの権限設定や承認機能が使用可能な大規模サイト向けのライセンス
特別ライセンス
a-blog cmsでは、特定の業種や開発のための特別なライセンスをご用意しています。
開発やテスト的な運用など、ライセンス費用の必要がない環境で自由にご利用いただけますので、是非ご利用ください。

デフォルト設定

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて:設定を編集する」を参照してください。

//-----------
// accordion
accordionMark   : '.js-accordion',
accordionConfig :
{
    active      : null,
    animated    : 'slide', // ( 'slide' | 'fade' | '' )
    heightStyle  : 'content',
    collapsible : true
},
accordionArray  : [
//    {
//        'mark'    : '',
//        'config'  : {}
//    }
],


accordionMark ここで指定したセレクタがアコーディオン表示になります。
accordionConfig アコーディオンのオプション設定です。
  • active:ここで指定されたクラスを持つ要素内のメニューヘッダ(初期値:a要素)は、初期表示時に展開された状態になります。「null」にすると一番上のメニューが展開されます。
  • animated:個々のメニューを展開したり閉じたりするときのアニメーション表示の指定です。(slide:スライドして表示 / fade:フェードしながら表示)
  • autoHeight:使用できなくなりました。heightStyleを使用してください。
  • heightStyle:アコーディオンと各コンテンツパネルの高さについの制御を指定します。(auto:全てのパネルは最も高い状態 / fill:親要素に収まる範疇で最も高い状態 / content:コンテンツに合わせた高さ)
  • collapsible:メニューの折りたたみの設定です。(true:全てのメニューが折りたたみ可能 / false:いずれか1つのメニューが必ず展開される)
accordionArray 配列として複数の設定を記述できます。同じページ内で複数の設定を併用したい場合などに利用します。

設定のカスタマイズ

config.jsのデフォルトの設定からカスタマイズする場合、JSファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config.accordionMark = '.js-sample-accordion';
  ACMS.Config.accordionConfig = {
    active      : null,
    animated    : 'slide', // ( 'slide' | 'fade' | '' )
    heightStyle  : 'content',
    collapsible : true
  }
});

配列で使用する方法

accordionArrayでは配列を渡せるようになっているので、複数の設定を指定したいときに使います。
markにはaccordionMark を、configにはaccordionConfig の設定を指定できます。

accordionArrayを使って設定を追加する場合にはJSファイルに以下のように記述します。

ACMS.Ready(function(){
  ACMS.Config.accordionArray.push({
    mark: '.js-sample-accordion',
    config: {
      active      : null,
      animated    : 'slide', // ( 'slide' | 'fade' | '' )
      heightStyle  : 'content',
      collapsible : true
    }
  });
});

HTMLとCSSの編集

HTML

指定したクラスをHTMLに記述します。例)accordionMarkで「.js-accordion」と指定した場合

<dl class="js-accordion">
  <dt><a href="#">メニューヘッダ1</a></dt>
  <dd>ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。</dd>
  <dt><a href="#">メニューヘッダ2</a></dt>
  <dd>ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。</dd>
  <dt><a href="#">メニューヘッダ3</a></dt>
  <dd>ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。</dd>
</dl>

CSS

必要に応じて、JavaScriptで指定したそれぞれのクラスにスタイルを指定します。

例)

.ui-accordion .ui-accordion-header {
  cursor:pointer;
  margin-top:1px;
  position:relative;
}
.ui-corner-all {
  -moz-border-radius:4px 4px 4px 4px;
}