エントリーの複数回折りたたみ（その1）

先日、以下のような質問を受けました。

一つのエントリー内で、javascriptを利用したエントリーの折りたたみ表示を何回も使用することはできるのでしょうか？
これができれば非常にありがたいのですが……。

そこで、1つのエントリーの中に、複数箇所の折りたたみを入れられるようなJavaScriptを作ってみました。
今日から3回に分けて紹介します。今日は下準備編です

以下の仕様をすべて満たすBlogツールであれば、このJavaScriptを使えるはずです。

記事内のタグをそのまま出力することができる
テンプレートをカスタマイズすることができる
スタイルシートをカスタマイズすることができる

1.JavaScriptの作成

まず、折りたたみ用のJavaScriptを作成します。
そのソースは以下の通りです。

function multifold(id)
{
    var obj = document.getElementById(id);
    var obj_c = document.getElementById(id + '_c');

    if (obj.style.display == 'block') {
        obj.style.display = 'none';
        obj_c.innerHTML = obj_c.innerHTML.replace(/閉じる/, "開く");
    }
    else {
        obj.style.display = 'block';
        obj_c.innerHTML = obj_c.innerHTML.replace(/開く/, "閉じる");
    }
}

作成したソースには、「multifold.js」という名前を付けて、サーバーの適切なディレクトリにアップロードします。
例えば、Movable Typeの場合なら、Blogの出力先ディレクトリにアップロードすると良いでしょう。

2.JavaScriptの組み込み

次に、Blogのテンプレートに、上記のJavaScriptを組み込みます。
テンプレートのHTMLのヘッダー部分（<head>～</head>の部分）に、以下の行を入れると、JavaScriptを組み込むことができます。
「multifold.jsのURL」の部分は、各自の環境に合わせて読み替えてください。

<script type="text/javascript" src="multifold.jsのURL"></script>

なお、Movable Typeの場合だと、以下のようにすれば、Blogの出力先ディレクトリからmultifold.jsを読み込むようになります。
また、Movable Typeでは、メインページと各アーカイブテンプレートに以下の部分を追加します。

<script type="text/javascript" src="<$MTBlogURL$>multifold.js"></script>

3.スタイルシートの追加

次に、Blogのスタイルシートのファイルに、以下の部分を追加します。

div.multifold {
    display : none;
}

お知らせ

エントリーの複数回折りたたみ（その1）

1.JavaScriptの作成

2.JavaScriptの組み込み

3.スタイルシートの追加

おすすめ