WordPress

【WordPress】クリックで表示/非表示を切り替えるプラグインShow-Hide / Collapse-Expand

December 21, 2017
Show-Hide / Collapse-Expand


Show-Hide / Collapse-ExpandはWebサイトへのアクセス時にユーザーに表示されるコンテンツの量を簡単に管理できるプラグイン。FAQを構成したり、長いリストを隠したりできます。

Show-Hide / Collapse-Expandプラグインを導入

ダッシュボード >> プラグイン >> 新規追加 >> Show-Hide / Collapse-Expandを検索
有効化にするとエディタにCollapse-Expand、ツールにShow-Hide/Collapse-Expandが追加されます。

Show-Hide/Collapse-Expand


Enable jQuery UI effectsにチェックを入れるとEffect for displaying hidden contentが追加されます。隠しコンテンツを表示するエフェクトは以下の中から選択可能。

  1. Blind
  2. Fold
  3. Highlight
  4. Slide

エディタ


ビジュアルにすると上記のようにInsert Collapse Expand Shortcodeが追加されるのでクリックします。

Expand/collapse content using コンテンツの展開/折りたたみ
Select button/link text color 選択ボタン/リンクテキストの色
Label for expanding content コンテンツを展開するためのラベル
Label for collapsing content 折りたたみコンテンツのラベル
Select button icon 選択ボタンアイコン
This shortcode should be nested in another shortcode ショートコードを入れ子にする必要があります。
Inline CSS インラインCSS
Onclick JS function Onclick JS関数


折りたたみの状態。

以下のように使用。
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[bg_collapse view="button-orange" color="#4a4949" icon="arrow" expand_text="Show More" collapse_text="Show Less" ]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/bg_collapse]