フェーダートグル

特定の箇所をクリックした際に、指定した要素の表示／非表示をフェード効果で切り替える組み込みJSです。（Ver.1.2.1より）初期状態は非表示状態です。

通常は隠しておき、クリックした時に表示されるようなものに使用できます。

デモ

詳細を表示する

詳細のテキストです。詳細のテキストです。詳細のテキストです。詳細のテキストです。

デフォルトの設定

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

fadeHeadClassSuffix : 'fade-head',
fadeBodyClassSuffix : 'fade-body',

---

---

設定のカスタマイズ

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

ACMS.Ready(function(){
  ACMS.Config. fadeHeadClassSuffix = 'js-sample-fade-head';
  ACMS.Config. fadeBodyClassSuffix = 'js-sample-fade-body';
});

使い方

HTMLを修正します。

例）fadeHeadClassSuffixで「fade-head」、fadeBodyClassSuffixで「fade-body」と指定した場合

<p class="fade-head">詳細を表示する</p>
<p class="fade-body">詳細のテキストです。詳細のテキストです。詳細のテキストです。詳細のテキストです。</p>

---