特定の部分の表示／非表示をスライド効果で切り替えるトグル機能

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

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

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

---

詳細を表示する

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

---

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

1. 設定の編集

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

    toggleHeadClassSuffix  : 'toggle-head',
    toggleBodyClassSuffix  : 'toggle-body',

toggleHeadClassSuffix	表示／非表示を切り替えるときにクリックする要素のclass名の接尾辞（後ろにつく文字列）を指定します。
toggleBodyClassSuffix	表示／非表示が切り替わる要素のclass名の接尾辞（後ろにつく文字列）を指定します。

2. HTMLの編集

例）toggleHeadClassSuffixで「toggle-head」、toggleBodyClassSuffixで「toggle-body」と指定した場合

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

表示／非表示を切り替えるときにクリックする要素は、アンカーリンク（<a>）ではなくても動作します。

---