First Weblog

下記のリンクをクリックして、jquery.listfolder.jsをダウンロード。

jquery.listfolder_0.0.5.js

折りたたみを行いたいページに以下の内容を設定します。

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.listfolder.js"></script>
<script type="text/javascript">
jQuery(function() {
    jQuery('#box').listfolder();
});
</script>

#boxの部分は、折りたたみを行いたいリストを包含している要素やid属性など、何でも構いません。

折りたたみリストの(X)HTMLマークアップ

listfolderプラグインは、次のような(X)HTMLマークアップを想定しています。

<dt class="sidetitle" id="hoge">Recent Entries</dt>
<dd>
  <ul>
    <li><a href="2011/08/post-8.html" title="e22">業務提携に関するお知らせ</a></li>
    <li><a href="2010/09/post-9.html" title="e23">モバイルサイトオープン</a></li>
    <li><a href="2010/07/java.html" title="e19">ソリューションセミナー</a></li>
  </ul>
</dd>

メニュータイトルとなる要素に対するclass属性・id属性の設定は必須です。メニュータイトルのclass属性値は統一してください。

オプション

listfolderプラグインは、次のオプションを用意しています。

• sidebarClass:メニュータイトルのclass属性値。デフォルトは'sidetitle'
• time:折りたたみスピード。デフォルトは0
• initOpen:初期状態を開いた状態にしたいリストのid属性値を配列で指定。デフォルトなし
• openMark:折りたたみマーク。このマークはclass属性値に'mark'が設定されているものに適用します。デフォルトは'▼'
• closeMark:折りたたみマーク。このマークはclass属性値に'mark'が設定されているものに適用します。デフォルトは'▲'
• specifyID:id属性指定。メニュータイトルの要素と折りたたむ内容の要素が隣接していない場合、タイトルの要素のid属性値に「title+値」、折りたたむ内容を括る要素のid属性値に「content+値」を設定することで関連づけます。この指定はブログのアーカイブページの記事折りたたみなどに有効です

設定例

jQuery(function() {
    jQuery('#box').listfolder({
        sidebarClass: 'hoge',
        time: 1000,
        initOpen: ['bbb','ddd','fff'],
    });
});

折りたたみマークの(X)HTMLマークアップ例（赤色部分）

<dd class="side" id="categories">
  <ul>
    <li><a href="cat1/" title="">お知らせ</a> [4] <a href="javascript:void(0)" id="cat0" class="sidetitle mark"></a>
  <ul>
    <li>イベント</li>
    <li>ニュース</li>
  </ul>
    </li>
    <li><a href="cat2/" title="">日記</a> [8] <a href="javascript:void(0)" id="cat1" class="sidetitle mark"></a>
  <ul>
    <li>旅行</li>
    <li>食事</li>
  </ul>
    </li>
  </ul>
</dd>