遠隔折り畳み要素

Created By: C-take

概要

通常折り畳み（[[collapsible]]）は折り畳みを開くボタン直下の文章しかコントロールできません。

+ 開く

折りたたまれた文章

これをCSSを用いる事によって表示が切り替わる範囲を任意に設定します。

CSS適用CSS

[[module css]]
 
.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]]

もしくは

[[module css]]
@import url('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() {
    var d=c(this).parents("div.collapsible-block").first();
    if(d.find(".collapsible-block-folded").is(":visible")) {
      d.find(".collapsible-block-folded").hide();
      var e=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()
    }
  }
  );