Uncyclopedia:CollapsibleDefinitionListsの使い方

出典: へっぽこ実験ウィキ『八百科事典(アンサイクロペディア)』
移動先: 案内検索

このページではコラプシブル・デフィニション・リスト(Collapsible Definition Lists)つまり折り畳み表示定義目録について説明しています。

コラプシブル・デフィニション・リストは、折り畳みできる定義目録(リスト)をJavaScriptとスタイルシートで動作しています。

使用方法[編集]

dlタグを使うことで導入できます。dl要素の親要素のクラスにcollapsibleを入れるだけです。

使用例[編集]

<div class="collapsible">
<dl>
<dt>[...見出し(表示ボタンがつく)...]</dt>
<dd>[... 折り畳み機能を使いたい内容 ...]</dd>
<dt>[...見出し(表示ボタンがつく)...]</dt>
<dd>[... 折り畳み機能を使いたい内容 ...]</dd>
</dl>
</div>
[...見出し(表示ボタンがつく)...]
[... 折り畳み機能を使いたい内容 ...]
[...見出し(表示ボタンがつく)...]
[... 折り畳み機能を使いたい内容 ...]

なお閉タグが表示されているが(</dt>とかの事)それはwikiのバグ仕様なのである(2010年11月現在)。 なのでwiki文法をに倣って以下のように記述すると問題にならない。

<div class="collapsible">
;[...見出し(表示ボタンがつく)...]
:[... 折り畳み機能を使いたい内容 ...]
;[...見出し(表示ボタンがつく)...]
:[... 折り畳み機能を使いたい内容 ...]
</div>
[...見出し(表示ボタンがつく)...]
[... 折り畳み機能を使いたい内容 ...]
[...見出し(表示ボタンがつく)...]
[... 折り畳み機能を使いたい内容 ...]

なおdt(セミコロンの行)の後にいくつdd(コロンの行)が続いても、次のdtの直前まで一つに折り畳まれる。また対応するdtが無いddは折り畳まれない。

<div class="collapsible">
:[... この部分は折り畳まれない ...]
:[... この部分は折り畳まれない ...]
;[... 見出し(表示ボタンがつく) ...]
:[... この部分は折り畳まれる ...]
;[... 見出し(表示ボタンがつかない - 折り畳む対象がない) ...]
;[... 見出し(表示ボタンがつく) ...]
:[... この部分は折り畳まれる ...]
:[... この部分も折り畳まれる ...]
;[... 見出し(表示ボタンがつく) ...]:[... この表記でも折り畳まれる ...]
</div>
[... この部分は折り畳まれない ...]
[... この部分は折り畳まれない ...]
[... 見出し(表示ボタンがつく) ...]
[... この部分は折り畳まれる ...]
[... 見出し(表示ボタンがつかない - 折り畳む対象がない) ...]
[... 見出し(表示ボタンがつく) ...]
[... この部分は折り畳まれる ...]
[... この部分も折り畳まれる ...]
[... 見出し(表示ボタンがつく) ...]
[... この表記でも折り畳まれる ...]

ブラウザの対応[編集]

JavaScriptとCSSを実装したブラウザでは、折り畳み機能を使うことができます。

JavaScriptが未実装あるいは無効化されている環境では、すべて展開された状態で表示されるのであまり深く考えないでよい。が、ご利用は計画的に

類似品[編集]