FCafe　 追記折り畳み別法

　追記の折り畳みを行う前二記事のソースを読み返していたら何だかもやもやした気分に。
「もうちょっとシンプルにできるんじゃないか？」
て感じがしきりにしまして、まだ使った事の無いノード参照てのを試してみました。
結果、エントリ（記事）部タグを更に簡潔化できる事が判明しましたので御紹介。
（前文と追記の間に別要素を挟み難くなりますが そのようなケースは稀でしょう）
・・・asgard_fold も このソースに小改訂？

【 設置法 】　　記事領域の本体（文章）部分*を以下のようにします。
（　*　<div class="entry_body"> 等の内部　 ）

　通常折り畳み<%topentry_body>
<!--more--><br id="More" /><!--/more-->
<!--more_link--><div class="m"><!--/more_link-->
<%topentry_more>
<!--more_link-->
</div><a href="<%topentry_link>#More" class="mlk">▼</a>
<!--/more_link-->

　シーソー折り畳み<!--more_link--><div><!--/more_link-->
<%topentry_body>
<!--more--><br id="More" /><!--/more-->
<!--more_link--></div><div class="m"><!--/more_link-->
<%topentry_more>
<!--more_link-->
</div><a href="<%topentry_link>#More" class="mlk">▼</a>
<!--/more_link-->

クラス名やＩＤ文字、リンク文言　等は一例です。お好みで設定されて下さい
DIVタグと次のDIV（A）タグは直接繋げ（間が空かないようにし）て下さい    

テンプレート末尾（　 </body> タグの手前）に以下のタグ（スクリプト）を貼ります。

　通常折り畳み<!--not_permanent_area--><script type="text/javascript"><!--
function mFold(){ 
if(document.getElementsByTagName){
 var A=document.getElementsByTagName('A');
 for(i=0;i<A.length;i++){ if(A[i].className=="mlk") {
  var N=A[i].href.split('entry-')[1].split('.')[0];
  A[i].href="javascript:MSW("+N+")";
  A[i].title="OPEN"; A[i].id="l"+N;
} } } }
mFold();
function MSW(N){
var A=document.getElementById("l"+N);
var B=A.previousSibling;
if(A.title=="OPEN"){ 
B.style.display="block";A.innerHTML="▲";A.title="CLOSE";
} else { 
B.style.display="none"; A.innerHTML="▼";A.title="OPEN";
} }
//--></script><!--/not_permanent_area-->


　シーソー折り畳み<!--not_permanent_area--><script type="text/javascript"><!--
function mFold(){ 
if(document.getElementsByTagName){
 var A=document.getElementsByTagName('A');
 for(i=0;i<A.length;i++){ if(A[i].className=="mlk") {
  var N=A[i].href.split('entry-')[1].split('.')[0];
  A[i].href="javascript:MSW("+N+")";
  A[i].title="NEXT"; A[i].id="l"+N;
} } } }
mFold();
function MSW(N){
var A=document.getElementById("l"+N);
var B=A.previousSibling;
var C=B.previousSibling;
if(A.title=="NEXT"){ 
B.style.display="block"; C.style.display="none"; A.innerHTML="▲"; A.title="PREV";
} else { 
B.style.display="none"; C.style.display="block"; A.innerHTML="▼"; A.title="NEXT";
} }
//--></script><!--/not_permanent_area-->

 

ＣＳＳに以下を追加します ( 共通 )

.m {display:none}

 

【 解説 】　（前文と）追記・追記リンクのID指定が省略されています。
追記リンクにはスクリプトがIDを与え、（前文と）追記は前方ノード参照で操作します。
その他の性質は前２記事と同様です。　（作動状況も前記事の各サンプルと同様になります）
*折り畳みＳＷ設定関数 mFold() の内容はＳＷのtitle文言以外は同じです

2006 / 10 / 26 　Thu
Entry   
Comment 2 / TB 0 / Edit