Recent Entries
Archives
Search


Links
Creative 
Commons License
This weblog is licensed under a Creative Commons License.

2004年02月12日

リーセントコメント折りたたみ

左側のリーセントコメントやトラックバックの表示が長くなるので、JavaScriptで折りたたみをやってみました。
この技はリンクなどでも同様に使えます。

以下を<head>....</head>の中などに記述。

<script language="javascript" type="text/javascript">
function showSwap(id1,id2){
var disp1 = document.getElementById(id1).style.display;
var disp2 = document.getElementById(id2).style.display;
document.getElementById(id1).style.display = disp2;
document.getElementById(id2).style.display = disp1;
return false;
}
</script>

リーセントコメントの場合だと以下のような感じになります。

<div class="sidetitle">
Recent Comments
</div>

<div class="side">

<div class="side" id="CommentOn" style="display: none">
<a href="#" onclick="showSwap('CommentOn','CommentOff');return false;">(-)</a> クリックで閉じる<br />
---ここにコメントタグが入る---
</div>

<div class="side" id="CommentOff">
<a href="#" onclick="showSwap('CommentOn','CommentOff');return false;">(+)</a> クリックで展開<br />
</div>

</div>

idの文字(この場合CommnetOnとCommentOff)は適当に変えて下さい。

<div class="side" id="CommentOn" style="display: none">

にしておくと、最初に表示した時には閉じた形になり、 (+)をクリックすると展開します。

<div class="side" id="CommentOn">

にして、

<div class="side" id="CommentOff" style="display: none">
にすると、その反対で最初に表示した時展開した形になります。

参考:
loungelabel.com :: おりたたんでみた。

Posted by mugen at 2004年02月12日 03:28 | TrackBack
Trackback
Comments

こちらの記述もシンプルでいいですね〜。
リトラクタにしてずいぶんたちますが、これなしではうちの構成はあり得ません。w

Posted by: CONQUE at 2004年04月22日 11:26
Post a comment









Remember personal info?


プログラム・コード形式にします太字にしますイタリック体にしますリンクを作成します