前記事の折り畳みはクリックした各要素毎に収納・展開状態を切り替えるというものでした。
従来、当店の(共有供出)テンプレートではエントリ(記事)やプラグイン部を折り畳む場合、
「選択された要素のみが展開され他は折り畳まれ」 た状態になる形式( 排他展開 )を採って来た訳ですが
前記事の方法でそれを実現してみよう、というのが今回のテーマです。
所謂(というか自称) 『タイトルの目次化』。
グループの要素数が多い場合などは「省スペース」効果が得られるかもしれません。
【 設置法 】 折り畳みが行われるグループの記述形式は前記事と同じです。
設置するスクリプトを以下のものに変更します。
<script type="text/javascript"><!--
function mkFold(IDname,color1,color2){
if (document.getElementById){
var D=document.getElementById(IDname); var A=D.childNodes;
for(i=0;i<A.length;i++){ if(A[i].nodeType!=1){
D.removeChild(A[i]);
} }
A=D.childNodes;
for (i=0;i<A.length;i++){
if (A[i].className){ if (A[i].className.indexOf("sw")>-1){
A[i].style.cursor ="pointer";
A[i].title ="Click to OPEN/CLOSE ";
A[i].onmouseover=function(){this.style.backgroundColor=color1}
A[i].onmouseout=function(){this.style.backgroundColor=color2}
A[i].onclick=function() {
var f=this.className; var G=this.parentNode.childNodes;
for (j=0;j<G.length;j++){
if (G[j].className){ if (G[j].className.indexOf("sw")>-1){
G[j].nextSibling.style.display="none";G[j].className="sw0";
} } }
if (f=="sw0"){
this.nextSibling.style.display="block";this.className="sw1";
} }
if (A[i].className=="sw0"){
A[i].nextSibling.style.display="none";
} } } } } }
mkFold("Entry","#fdd","#ddf"); //(例)
mkFold("Plug1","#66a","#aae"); //(例)
//--></script>
【 解説 】 SW(タイトル)click時に作動する関数に他要素も畳ませるようにしたもの。
「選択要素以外全部収納」 というFCafeスタイルをsugさんのエンジンで実現できました。
折り畳みに関しては 専用アイコンを用いるtakkyun氏の方法が有名ですが、小題帯(タイトル部)そのものがSWとなるsug氏の方法は設置やクリックがより簡便であると言えます。
+『一択(排他)展開』。 同格要素が繰り返し出力されるエントリやプラグイン部を折り畳む場合は使途があるかも知れません。
・・・それにしてもここまで来るのに2年。
「記事の折り畳み」は FC2blogに来る前からやってたのに進歩遅過ぎ。
身近に優れた教材があったのに・・・と悔やまれる事しきりです。
( 中年更に老い易く、学 成り難し )
| . |