リファレンスreference

組み込みJS

更新日: 2014.03.10

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

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

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

1. 設定の編集

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

    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>)ではなくても動作します。

3. デモ

詳細を表示する

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