特定の部分の表示／非表示をフェード効果で切り替える機能（js-fader）

a-blog cmsでは、ある特定の箇所をクリックした際に、指定した要素の表示／非表示をフェード効果で切り替える機能の設定が標準で実装されています。（v1.2.1より）初期状態は非表示状態です。

通常は隠しておき、クリックした時に表示されるようなものに使用できます。js-faderでは、表示／非表示の対象を複数指定できます。

サンプル）下にある「詳細を表示する」のテキストをそれぞれクリックしてください。

---

詳細Aを表示する

詳細Bを表示する

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

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

---

特定の部分の表示／非表示を切り替える

1. 設定の編集

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

    //-------
    // fader
    faderMark   : '.js-fader',
    faderConfig :
    {
        initial     : 'hide', // ( 'hide' | 'show' )
        effect      : 'fade', // ( 'fade' | 'slide' | '' )
        speed       : 'fast', // ( 'fast' | 'slow' )
        activeClass : 'js-fader-active',
        readyMark   : '.js-ready-fader' // e.g. window.document.location.hash
    },
    faderArray  : [
    //    {
    //        'mark'    : '',
    //        'config'  : {}
    //    }
    ],

faderMark	ここで指定したセレクタが表示／非表示の切り替えをするスイッチになります。
faderConfig	フェード表示のオプション設定です。 initial：ページを表示したときの表示／非表示の初期状態です。（show：表示 / hide：非表示） effect：フェードの表示・非表示時のアニメーションの指定です。（fade：フェードしながら表示 / slide：スライドして表示） speed：フェードの表示・非表示時のアニメーションスピードの指定です。（fast：速く表示 / slow：ゆっくり表示） activeClass：「現在表示されている要素」に対して付与するクラス名です。 readyMark：ページを表示したときに、ここで指定したセレクタが強制的に表示状態になります。基本はinitialで表示／非表示を指定しておき、特定のもののみ表示状態にしたい場合にこの設定を使用します。
faderArray	配列として複数の設定を記述できます。同じページ内で複数の設定を併用したい場合などに利用します。

2. HTMLとCSSの編集

HTML

指定したクラスをHTMLに記述します。

例）tabsMarkで「.js-fader」と指定した場合

表示／非表示を切り替えるスイッチのa要素にクラス「js-fader」を付与し、そのa要素のhref属性には頭に#が付いたフラグ名を付けます。

表示／非表示される内容部分の要素には、id属性値としてa要素で指定したhref属性値の#なしの名称を付けます。

---

<p><a href="#fadeSampleA" class="js-fader">詳細Aを表示する</a></p>
<p><a href="#fadeSampleB" class="js-fader">詳細Bを表示する</a></p>
<p id="fadeSampleA">詳細Aのテキストです。詳細Aのテキストです。詳細Aのテキストです。詳細Aのテキストです。</p>
<p id="fadeSampleB">詳細Bのテキストです。詳細Bのテキストです。詳細Bのテキストです。詳細Bのテキストです。</p>

---