スライドトグル

特定の箇所をクリックした際に、指定した要素の表示/非表示をスライド効果で切り替えるトグル機能です。(Ver. 1.2.1より)初期状態は非表示状態です。

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

デモ

詳細を表示する

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

デフォルト設定

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

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


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

設定のカスタマイズ

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

ACMS.Ready(function(){
  ACMS.Config.toggleHeadClassSuffix = 'js-sample-toggle-head';
  ACMS.Config.toggleBodyClassSuffix = 'js-sample-toggle-body';
});

HTMLの編集

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

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

表示/非表示を切り替えるときにクリックする要素は、アンカーリンク()ではなくても動作します。