目次

ここは旧トップページ＞DokuWiki関連

DokuWiki - プラグイン無しで折り畳み機能

手軽ではありませんが次の方法でプラグインを使わずに文書を折り畳みやアコーディオンメニューを実装できます。CSSのみで動作するのでJavascriptやFlashを無効化していても動作します。（HTMLを使用するため、DokuWikiのサイト設定でHTML埋め込みを許可する必要があります）

デモ1

下記をクリックするとメニューが開閉します。



デモ2

開いてる状態からスタート



デモ3

多段も可能



｜1段目



｜｜2段目-1



｜｜｜3段目



｜｜2段目-2


設置方法

まず、次のコードを文書に1つ挿入します（1ページ中に複数あっても問題ありません） 

<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>

開閉したい部分に次のコードを挿入し、label要素とinput要素の“abcde12345”を他と要素と重複しない値に変更します(forとidは1セットなので同じ名前にする)。サイドメニューで使う場合は値が本文側と重複しないよう注意して下さい。

<HTML>と</HTML>とは大文字です。小文字で書くと動作しません。 

<HTML>
<label for="abcde12345">ここをクリック！</label><br />
<input id="abcde12345" type="checkbox" class="accordion" />
<div>
</HTML>
 
ここに開閉したい文書を書く（DokuWiki整形記法が使えます）
 
<HTML>
</div>
</HTML>

開いてる状態から開始したい場合は、input要素に checked=“checked” を挿入します。 

<input id="abcde12345" type="checkbox" class="accordion" checked="checked" />

多段にしたい場合は、「ここに開閉したい文書を書く（DokuWiki整形記法が使えます）」の部分に、もう同じ一度コードを入力するだけ（forとidのabcde12345は別の物にする）、重箱のように入れ子(ネスト)にすれば何段でも重ねれます。 

<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>

ここは旧トップページ＞DokuWiki関連