chocolat* BLOG

※ リスト部分を閉じたり開いたりできる
※ リストに含まれるアイテム数をカウントして表示する
※ 折り畳み用ボタンを開いた状態・閉じた状態で設定できる

例　：　 「カテゴリー一覧」 の設定方法 （ピンクの強調文字がID名を付け加えた部分）
<!-- カテゴリー一覧 -->
<div class="side_title" style="margin-top:0px;">
<img src="http://blog-imgs-1.fc2.com/c/h/o/chocolatblog/306-sidetitle.gif" width="10" height="12" border="0" align="middle"> CATEGORY <a href="#pagetop" title="このページのトップへ">▲</a></div>
<div class="side_text">
<ul>
<!--category-->
<li><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li>
<!--/category-->
</ul>
</div><br><br>

↓ 上記の部分を、以下のように設定します （開閉マークをタイトル前につける場合） ↓

<!-- カテゴリー一覧 -->
<div class="side_title" style="margin-top:0px;" id="categoryname">
CATEGORY <a href="#pagetop" title="このページのトップへ">▲</a></div>
<div class="side_text" id="categorylist">
<ul>
<!--category-->
<li><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li>
<!--/category-->
</ul>
</div><br><br>

↓ 開閉マークを後ろにつける場合は、以下のようにします ↓

<!-- カテゴリー一覧 -->
<div class="side_title" style="margin-top:0px;" id="categoryname">
<img src="http://blog-imgs-1.fc2.com/c/h/o/chocolatblog/306-sidetitle.gif" width="10" height="12" border="0" align="middle"> CATEGORY</div>
<div class="side_text" id="categorylist">
<ul>
<!--category-->
<li><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li>
<!--/category-->
</ul>
</div><br><br>

▽ ページエントリーリスト
　　タイトル ： id="entryname"　　　本体 ： id="entrylist"
▽ 最新エントリーリスト
　　タイトル ： id="newentryname"　　　本体 ： id="newentrylist"
▽ 最新コメントリスト
　　タイトル ： id="commentname"　　　本体 ： id="commentlist"
▽ 最新トラックバックリスト
　　タイトル ： id="tbname"　　　本体 ： id="tblist"
▽ リンクリスト
　　タイトル ： id="linkname"　　　本体 ： id="linklist"
▽ カテゴリーリスト
　　タイトル ：　id="categoryname　　　本体 ： id="categorylist
▽ アーカイブリスト
　　タイトル ： id="archivename"　　　本体 ：　id="archivelist"
▽ プロフィールリスト
　　タイトル ： id="profilename"　　　本体 ： id="profilelist"

<script type="text/javascript">
<!--
function InitFoldNavi() {
  FoldNavigation('newentry','off',false);  // 最新エントリ
  FoldNavigation('entry'    ,'on' ,true);  // ページエントリ
  FoldNavigation('category','on',false);  // カテゴリー
  FoldNavigation('comment' ,'on' ,false);  // 最新コメント
  FoldNavigation('tb'      ,'on' ,false);  // 最新トラックバック
  FoldNavigation('archive' ,'off',true);  // アーカイブ
  FoldNavigation('link'    ,'on' ,true);  // リンク
  FoldNavigation('profile' ,'off',false); // プロフィール
}
function FoldNavigation(idName,initMode,viewNum) {
  var openMark = '▽'; /* 閉じている場合に開くためのマーク */
  var closeMark = '△'; /* 開いている場合に閉じるためのマーク */
  var preMark = true; /* マークの挿入位置。タイトルの前なら true、タイトルの後ろなら false */
  var idTitle = Array(idName,'name').join('');
  var idList = Array(idName,'list').join('');
  var objTitle = this.document.getElementById(idTitle);
  var objLists = this.document.getElementById(idList);
  if (!objTitle || !objLists) return;
  var dispMode = objLists.style.display;
  if (!dispMode) {
    var tmpText = Array('FoldNavigation(',"'",idName,"','chng','');return(false);").join('');
    var insMark = new Array();
    var insText = new Array();
    insMark[insMark.length] = Array('<a class="foldmark" href="#" onclick="',tmpText,'" onkeypress="',tmpText,'">').join('');
    insMark[insMark.length] = (initMode == 'off') ? openMark : closeMark;
    insMark[insMark.length] = '</a>';
    if (preMark) insText[insText.length] = insMark.join('');
    insText[insText.length] = objTitle.innerHTML;
    if (viewNum) {
      var objItems = objLists.getElementsByTagName('li');
      insText[insText.length] = Array(' <span>(',objItems.length,')</span>').join('');
    }
    if (!preMark) insText[insText.length] = insMark.join('');
    objLists.style.display = (initMode == 'off') ? 'none' : 'block';
    objTitle.innerHTML = insText.join('');
  } else if (initMode == 'chng') {
    var objMarks = objTitle.getElementsByTagName('a');
    for (i=0;i<objMarks.length;i++) {
      if (objMarks[i].className == 'foldmark') {
        objMarks[i].firstChild.nodeValue = (dispMode == 'none') ? closeMark : openMark;
      }
    }
    objLists.style.display = (dispMode == 'none') ? 'block' : 'none';
  }
}
InitFoldNavi(); // ナビゲーションの折り畳み
// -->
</script>

function InitFoldNavi() {
  FoldNavigation('newentry','off',false);  // 最新エントリ
  FoldNavigation('entry'    ,'on' ,true);  // ページエントリ
  FoldNavigation('category','on',false);  // カテゴリー
  FoldNavigation('comment' ,'on' ,false);  // 最新コメント
  FoldNavigation('tb'      ,'on' ,false);  // 最新トラックバック
  FoldNavigation('archive' ,'off',true);  // アーカイブ
  FoldNavigation('link'    ,'on' ,true);  // リンク
  FoldNavigation('profile' ,'off',false); // プロフィール
}

FoldNavigation('newentry','off',false);  // 最新エントリ

FoldNavigation('リスト名','初期表示',アイテム数表示);

var openMark = '▽'; /* 閉じている場合に開くためのマーク */
var closeMark = '△'; /* 開いている場合に閉じるためのマーク */
var preMark = false; /* マークの挿入位置。タイトルの前なら true、タイトルの後ろなら false */

var openMark = '[開]'; /* 閉じている場合に開くためのマーク */
var closeMark = '[閉]'; /* 開いている場合に閉じるためのマーク */
var preMark = true; /* マークの挿入位置。タイトルの前なら true、タイトルの後ろなら false */

<a class="foldmark">

.side_title span {  /* リスト数の設定 */
  color:gray;
}

.side_title a.foldmark{  /* 開閉マークの設定 */
  text-decoration:none;
}