アコーディオン

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'  : {}
//    }
],

---

---

設定のカスタマイズ

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;
}

---