内容へ移動
あちあち情報局
趣味や日曜プログラムなどを書いています
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
トップページ
»
DokuWiki - プラグイン無しで折り畳み機能
dokuwiki_accordion
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
[[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]]
dokuwiki_accordion.txt
· 最終更新: 2018/04/20 21:06 by
管理者
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ