フェーダートグル
この機能は、アクセシビリティの考慮がされておらず、制作者が意図せずアクセシビリティを考慮できていないサイトを作り込む危険性があるため、Ver. 3.2 より非推奨になりました。
代替機能として、HTML標準機能である summary, details タグの利用を推奨いたします。
特定の箇所をクリックした際に、指定した要素の表示／非表示をフェード効果で切り替える組み込みJSです。（Ver.1.2.1より）初期状態は非表示状態です。
通常は隠しておき、クリックした時に表示されるようなものに使用できます。
デモ
詳細を表示する
詳細のテキストです。詳細のテキストです。詳細のテキストです。詳細のテキストです。
デフォルトの設定
この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。
fadeHeadClassSuffix : 'fade-head',
fadeBodyClassSuffix : 'fade-body',
| fadeHeadClassSuffix | 表示／非表示を切り替えるときにクリックする要素のclass名の接尾辞（後ろにつく文字列）を指定します。 |
|---|---|
| fadeBodyClassSuffix | 表示／非表示が切り替わる要素のclass名の接尾辞（後ろにつく文字列）を指定します。 |
設定のカスタマイズ
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>
