自己投資図書館

リストを開閉する方法/ショートコードのプラグイン「Shortcodes Ultimate」のアコーディオンとスポイラーの使い方【jQuery,JavaScript,cssを使わずに入れ子構造もできる】

リストタグで囲ったテキストを開閉できるようにしたい!

こんな感じでクリックすると開くリストが作りたい
ここクリック
するとひらく
ここクリック
するとオープン
ここクリック
すると読める

ということでざっと調べてみると
JavaScriptやjQueryを使った方法ばかり
皆さん簡単そうに解説してるんですがちょっと僕には難しい
cssやプラグインぐらいまでなら頑張る気になるんですが・・・

いろいろと調べた結果
多種多様なショートコードが使えるプラグイン

「Shortcodes Ultimate」

これにアコーディオンスポイラーのショートコードがあり
うまい事使えばリストの開閉が簡単に実装できます。

「Shortcodes Ultimate」のインストールと有効化

プラグインの新規追加から
「Shortcodes Ultimate」
を検索して
インストールして有効化

常のごとし

アコーディオンとスポイラーのショートコードの使い方

アコーディオン(Accordion)とスポイラー(Spoilers)の違い

アコーディオンコード

で囲んだ部分はスポイラー1つが開いている時は
別のスポイラーが閉じます
1つのスポイラーしかひらきません。
アコーディオンは1つだけ開く
ここクリック
こちら開けば
ここクリック
あちらが閉じる
ここクリック
そちらが閉じる

コード例

個人的にはアコーディオンにする必要があまりわからない
基本はスポイラーだけでいいのかな、と思います。

基本形

スポイラーの基本的な形
ココをクリックしたら開く
開くと読める
コード例

2列になってもリストタグを入れてもOK

リストタグもOK
クリック
2列にわたっても
だいじょうぶ
リストタグも入れれる
  • リストタグ
  • にしても
  • 大丈夫

コード例

色々なスタイルを選べる

ファンシーなスタイル
ココをクリックでひらく
こんにちは

コード例

ショートコードに
style=”fancy”
を追加するだけ

他にも

他のデザイン
デフォルトスタイル
デフォルトスタイル
シンプルスタイル
シンプルスタイル
コード例

のデザインが選べる

デフォルト→style=”default”
シンプル→style=”simple”
をショートコードに追加

初めからオープンしておく事も出来る

ショートコードにopen=”yes”
を追加すると、初めから開いている状態にすることも可能。

初めから開いているスポイラー
初めから開いている
こんな感じ

入れ子構造もできる

当初、「Shortcodes Ultimate」のショートコードでスポイラーの入れ子構造ができないと思っていたんですが
注意深く確認すると出来ることがわかりました。

入れ子第1階層
第1階層のテキスト
入れ子第2階層
第2階層のテキスト
[__su_spoiler title=”入れ子第3階層”] 第3階層のテキスト
[__/su_spoiler]

コード例

スポイラーのショートコードの先頭に アンダーバーを追加
_

階層を深くするにはアンダーバーをさらに追加するとOKです。

これならマインドマップソフトっぽい表現もできる。