遠隔折り畳み要素
概要
通常折り畳み([[collapsible]])は折り畳みを開くボタン直下の文章しかコントロールできません。
折りたたまれた文章
これをCSSを用いる事によって表示が切り替わる範囲を任意に設定します。
CSS適用CSS
[[modulecss]] .remoteCollapsible > .collapsible-block > .collapsible-block-unfolded{display:block !important; }.remoteCollapsible > .collapsible-block > .collapsible-block-unfolded > .collapsible-block-content{ -ms-filter: "alpha(opacity=100)" !important; /*IE 8,9 */ -moz-opacity:1 !important; /*FF , Netscape*/ -khtml-opacity:1 !important; /*Safari 1.x*/ opacity:1 !important; zoom:1 !important; /*IE*/ }.remoteCollapsible.collapsible-block-unfolded[style="display:none"] > .collapsible-block-unfolded-link{display:none; }.remoteCollapsible.collapsible-block-unfolded[style="display:none;"] > .collapsible-block-unfolded-link{display:none; }.remoteCollapsible.collapsible-block-unfolded[style="display: none;"] > .collapsible-block-unfolded-link{display:none; }.remoteCollapsible.collapsible-block-unfolded.hide-show{display:none; }[[/module]]
もしくは
[[modulecss]] @importurl('http://shitake-crude-production.wikidot.com/remote-ctrl-collapsible/code/1'); [[/module]]
デモ
最初から表示されている文章
折りたたまれた文章
[[div class="remoteCollapsible"]]
[[collapsible show="+ 折り畳み開く" hide="- 折り畳み閉じる"]]
最初から表示されている文章
[[div class="collapsible-block-unfolded" style="display:none"]]
折りたたまれた文章
[[/div]]
[[/collapsible]]
[[/div]]
デモ2
また1つの折り畳みで複数箇所の表示切替をする事が可能です。
最初から表示されている文章
折りたたまれた文章
これも最初から表示されている文章
折りたたまれた文章2
[[div class="remoteCollapsible"]]
[[collapsible show="+ 折り畳み開く" hide="- 折り畳み閉じる"]]
最初から表示されている文章
[[div class="collapsible-block-unfolded" style="display:none"]]
折りたたまれた文章
[[/div]]
これも最初から表示されている文章
[[div class="collapsible-block-unfolded" style="display:none"]]
折りたたまれた文章2
[[/div]]
[[/collapsible]]
[[/div]]
デモ3
下記のdiv要素を使う事により、単なる表示非表示だけでなく、状態によって表示される文章をガラっと変える事も可能です。
[[div class="collapsible-block-folded"]]
[[/div]]
折りたたみが開かれている時に表示されている文章
折り畳みが閉じられている時に表示されている文章
[[div class="remoteCollapsible"]]
[[collapsible show="+ 折り畳み開く" hide="- 折り畳み閉じる"]]
[[div class="collapsible-block-unfolded" style="display:none"]]
##red|折りたたみが開かれている時に表示されている文章##
[[/div]]
[[div class="collapsible-block-folded"]]
折り畳みが閉じられている時に表示されている文章
[[/div]]
[[/collapsible]]
[[/div]]
デモ4
折り畳みが開かれた時のフェードインは"collapsible-block-unfolded"の中にcollapsible-block-contentクラスの要素を入れる事で実装できます。
折りたたみが開かれている時に表示されている文章
折り畳みが閉じられている時に表示されている文章
[[div class="remoteCollapsible"]]
[[collapsible show="+ 折り畳み開く" hide="- 折り畳み閉じる"]]
[[div class="collapsible-block-unfolded" style="display:none"]]
[[div class="collapsible-block-content"]]
##red|折りたたみが開かれている時に表示されている文章##
[[/div]]
[[/div]]
[[div class="collapsible-block-folded"]]
折り畳みが閉じられている時に表示されている文章
[[/div]]
[[/collapsible]]
[[/div]]
オマケ
collapsibleを実装しているjsのコードです(実物を見やすいように整形)。今回のこのWikidotコードは下記のJSコードを逆手にとったものです。
c("div.collapsible-block a.collapsible-block-link").livequery("click", function(){vard=c(this).parents("div.collapsible-block").first(); if(d.find(".collapsible-block-folded").is(":visible")){d.find(".collapsible-block-folded").hide(); vare=d.find(".collapsible-block-unfolded"); e.find(".collapsible-block-content").hide(); e.show(); e.find(".collapsible-block-content").fadeIn("fast")}else{d.find(".collapsible-block-unfolded").hide(); d.find(".collapsible-block-folded").show()}});
page revision: 1, last edited: 26 Jun 2018 13:39