あちあち情報局

趣味や日曜プログラムなどを書いています

ユーザ用ツール

サイト用ツール

現在位置: トップページ » DokuWiki - プラグイン無しで折り畳み機能

サイドバー

メニュー

現在リニューアル中

トップページ

ブログ
コンテンツ
その他
連絡方法
関係者用
旧コンテンツは下部

旧コンテンツ

* ここは旧トップページ

タグ一覧

タグ#
3
1
1
5
3
3
1
1
1
5
2
3
2
1
3
3
12
3
9
5
1
1
4
15
12
4
1
3
3
1
2
1
1
1
1
4
29
8
2
4
3
1
1
8
1
1
1

PV : 2916248

dokuwiki_accordion

目次

ここは旧トップページ＞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関連

dokuwiki_accordion.txt · 最終更新: 2018/04/20 21:06 by 管理者

ページ用ツール

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki