きままにポロポロ

折りたたみ式文章

Blog設定覚え書き。

なかよしこよしさま経由で知った便利なTips.

G O I N G M A M E W A Y
追記部分とコメントTIPS

「続きを読む」以下が別ページリンクでなく折りたたみ式になるというものです。
G O I N G M A M E W A Yさまから辿り辿ってこのスクリプトの出所サイトさままで行ってみたところ、2004年１月６日にバージョンアップされたソースが公開されてたので、私はそちらを採用してみました。
以下覚え書き。

オレンジ色の部分が、上記サイトさまにあるスクリプトソースから変更があった部分。
JavaScript部分

<script type="text/javascript">

function showHide(entryID, entryLink, htmlObj, type) {
if (type == "comments") {
extTextDivID = ('comText' + (entryID));
extLinkDivID = ('comLink' + (entryID));
} else {
extTextDivID = ('extText' + (entryID));
extLinkDivID = ('extLink' + (entryID));
}
if( document.getElementById ) {
if( document.getElementById(extTextDivID).style.display ) {
if( entryLink != 0 ) {
document.getElementById(extTextDivID).style.display = "block";
document.getElementById(extLinkDivID).style.display = "none";
htmlObj.blur();
} else {
document.getElementById(extTextDivID).style.display = "none";
document.getElementById(extLinkDivID).style.display = "block";
}
} else {
location.href = entryLink;
return true;
}
} else {
location.href = entryLink;
return true;
}
}
</script>

MainIndex等の追記部分

<MTEntryIfExtended>
<div id="extLink<$MTEntryID$>">
<a href="<$MTEntryPermalink$>" name="ext<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,'<$MTEntryPermalink$>',this,'entry');return false;">Read More... ≫</a>
</div>
<div id="extText<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
<a href="#ext<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this,'entry');return true;">« All done!</a>
</div>
</MTEntryIfExtended>

該当部分にまるごとコピペすればOK

また、私はやっていませんが、コメントも隠したり表示したりしたい場合は、以下のように
"ext" を "com"に変えて Individualテンプレートの
<MTEntryIfAllowComments>
から
</MTEntryIfAllowComments>
の間を書き換えればいいようです。

<MTEntryIfAllowComments>
<div id="comLink<$MTEntryID$>">
<a href="<$MTEntryPermalink$>" name="com<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,'<$MTEntryPermalink$>',this,'comments');return false;">Show Comments (<$MTEntryCommentCount$>)</a> | <a href="<$MTEntryPermalink$>#comments">Add your comment</a>
</div>
<div id="comText<$MTEntryID$>" style="display: none">
<a href="#com<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this,'comments');return true;">Hide Comments</a>
| <a href="<$MTEntryPermalink$>#comments">Add your comment</a>
<MTComments>
<$MTCommentBody$>
<p>Posted by <$MTCommentAuthorLink show_email="0"$> at <$MTCommentDate$></p><br>
</MTComments>
<a href="#com<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this,'comments');return true;">Hide Comments</a> | <a href="<$MTEntryPermalink$>#comments">Add your comment</a>
</div>
</MTEntryIfAllowComments>

一応私もこのコメント部分の動作を確認してみたんですが、このままではコメントを投稿する「Add your comment」の部分が正常に動かなかったので、以下のように修正してみました。

<MTEntryIfAllowComments>
<div class="posted" id="comLink<$MTEntryID$>">
<a href="<$MTEntryPermalink$>" name="com<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,'<$MTEntryPermalink$>',this,'comments');return false;">Comments read & write(<$MTEntryCommentCount$>)</a>
</div>
<div class="posted" id="comText<$MTEntryID$>" style="display: none">
<a href="#com<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this,'comments');return true;">Hide Comments</a>

<MTComments>
<a name="<$MTCommentID$>"></a>
<div class="comments-body">
<$MTCommentBody$>
<span class="comments-post">Posted by: <$MTCommentAuthorLink spam_protect="1"$> at <$MTCommentDate$></span>
</div>
</MTComments>
<MTEntryIfCommentsOpen>
<div class="comments-head">Post a comment</div>
<div class="comments-body">
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" onsubmit="if (this.bakecookie[0].checked) rememberMe(this)">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />
<div style="width:180px; padding-right:15px; margin-right:15px; float:left; text-align:left; border-right:1px dotted #bbb;">
<label for="author">Name:</label><br />
<input tabindex="1" id="author" name="author" /><br /><br />
<label for="email">Email Address:</label><br />
<input tabindex="2" id="email" name="email" /><br /><br />
<label for="url">URL:</label><br />
<input tabindex="3" id="url" name="url" /><br /><br />
</div>
Remember personal info?<br />
<input type="radio" id="bakecookie" name="bakecookie" /><label for="bakecookie">Yes</label><input type="radio" id="forget" name="bakecookie" onclick="forgetMe(this.form)" value="Forget Info" style="margin-left: 15px;" /><label for="forget">No</label><br style="clear: both;" />
<label for="text">Comments:</label><br />
<textarea tabindex="4" id="text" name="text" rows="10" cols="50"></textarea><br /><br />
<input type="submit" name="preview" value=" Preview " />
<input style="font-weight: bold;" type="submit" name="post" value=" Post " /><br /><br />
</form>
<script type="text/javascript" language="javascript">
<!--
document.comments_form.email.value = getCookie("mtcmtmail");
document.comments_form.author.value = getCookie("mtcmtauth");
document.comments_form.url.value = getCookie("mtcmthome");
if (getCookie("mtcmtauth")) {
document.comments_form.bakecookie[0].checked = true;
} else {
document.comments_form.bakecookie[1].checked = true;
}
//-->
</script>
</div>
</MTEntryIfCommentsOpen>
<div class="posted">
<a href="#com<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this,'comments');return true;">Hide Comments</a>
</div>
</MTEntryIfAllowComments>

これで普通にIndividualテンプレートにあったコメントフォームが出たり隠れたりするはずです。