差分

このページの2つのバージョン間の差分を表示します。

--- dokuwiki_accordion [2018/03/31 15:09] – 管理者
+++ dokuwiki_accordion [2018/04/20 21:06] (現在) – 管理者
@@ 行 1: / 行 1: @@
+[[start]]＞[[dokuwiki_start]]
+====== DokuWiki - プラグイン無しで折り畳み機能 ======
+手軽ではありませんが次の方法でプラグインを使わずに文書を折り畳みやアコーディオンメニューを実装できます。CSSのみで動作するのでJavascriptやFlashを無効化していても動作します。（HTMLを使用するため、DokuWikiのサイト設定でHTML埋め込みを許可する必要があります）
+----
+===== デモ1 =====
+下記をクリックするとメニューが開閉します。
+<HTML>
+<style>
+  .border1bg{border:solid 1px #cccccc;background-color:#eeeeee;}
+  input[type="checkbox"].accordion + div{
+    display:none;
+  }
+  input[type="checkbox"].accordion:checked + div{
+    display:block;
+  }
+  input[type="checkbox"].accordion{
+    display:none;
+  }
+</style>
+<div class="border1bg">
+<label for="dokuwikimemo_for01">ここをクリック！</label><br />
+<input type="checkbox" id="dokuwikimemo_for01" class="accordion" />
+<div>
+</HTML>
+  * [[:start]]
+  * [[memo]]
+<HTML>
+</div></div>
+</HTML>
+\\
+===== デモ2 =====
+開いてる状態からスタート
+<HTML>
+<div class="border1bg">
+<label for="dokuwikimemo_for02">ここをクリック！</label><br />
+<input type="checkbox" id="dokuwikimemo_for02" class="accordion" checked="checked" />
+<div>
+</HTML>
+  * [[:start]]
+  * [[memo]]
+<HTML>
+</div></div>
+</HTML>
+\\
+===== デモ3 =====
+多段も可能
+<HTML>
+<div class="border1bg">
+<label for="dokuwikimemo_for03">＋ここをクリック！</label><br />
+<input type="checkbox" id="dokuwikimemo_for03" class="accordion" />
+<div>
+</HTML>
+\\
+｜1段目
+<HTML>
+  <label for="dokuwikimemo_for031">｜＋ここをクリック！</label><br />
+  <input type="checkbox" id="dokuwikimemo_for031" class="accordion" />
+  <div>
+</HTML>
+\\
+｜｜2段目-1
+<HTML>
+  <label for="dokuwikimemo_for0321">｜｜＋ここをクリック！</label><br />
+  <input type="checkbox" id="dokuwikimemo_for0321" class="accordion" />
+  <div>
+</HTML>
+\\
+｜｜｜3段目
+<HTML>
+  </div>
+</HTML>
+<HTML>
+  </div>
+</HTML>
+<HTML>
+  <label for="dokuwikimemo_for032">｜＋ここをクリック！</label><br />
+  <input type="checkbox" id="dokuwikimemo_for032" class="accordion" />
+  <div>
+</HTML>
+\\
+｜｜2段目-2
+<HTML>
+  </div>
+</HTML>
+<HTML>
+</div></div>
+</HTML>
+\\
+===== 設置方法 =====
+まず、次のコードを文書に1つ挿入します（1ページ中に複数あっても問題ありません）
+<code html>
+<HTML>
+<style>
+  input[type="checkbox"].accordion + div{
+    display:none;
+  }
+  input[type="checkbox"].accordion:checked + div{
+    display:block;
+  }
+  input[type="checkbox"].accordion{
+    display:none;
+  }
+</style>
+</HTML>
+</code>
+開閉したい部分に次のコードを挿入し、label要素とinput要素の"abcde12345"を他と要素と重複しない値に変更します(forとidは1セットなので同じ名前にする)。サイドメニューで使う場合は値が本文側と重複しないよう注意して下さい。
+%%<HTML>%%と%%</HTML>%%とは大文字です。小文字で書くと動作しません。
+<code html>
+<HTML>
+<label for="abcde12345">ここをクリック！</label><br />
+<input id="abcde12345" type="checkbox" class="accordion" />
+<div>
+</HTML>
+ここに開閉したい文書を書く（DokuWiki整形記法が使えます）
+<HTML>
+</div>
+</HTML>
+</code>
+開いてる状態から開始したい場合は、input要素に checked="checked" を挿入します。
+<code html>
+<input id="abcde12345" type="checkbox" class="accordion" checked="checked" />
+</code>
+多段にしたい場合は、「ここに開閉したい文書を書く（DokuWiki整形記法が使えます）」の部分に、もう同じ一度コードを入力するだけ（forとidのabcde12345は別の物にする）、重箱のように入れ子(ネスト)にすれば何段でも重ねれます。
+<code html>
+<HTML>
+<label for="abcde12345">ここをクリック！</label><br />
+<input id="abcde12345" type="checkbox" class="accordion" />
+<div>
+</HTML>
+ここは1段目の文書を書く
+↓↓↓ここから2段目
+<HTML>
+<label for="abcde22222">ここをクリック！</label><br />
+<input id="abcde22222" type="checkbox" class="accordion" />
+<div>
+</HTML>
+ここに2段目の文書を書く（DokuWiki整形記法が使えます）
+<HTML>
+</div>
+</HTML>
+↑↑↑ここまで2段目
+ここにも1段目の文書を書ける
+<HTML>
+</div>
+</HTML>
+</code>
+----
+[[start]]＞[[dokuwiki_start]]