カテゴリ一覧のアコーディオン表示

MTQに以下のような質問が上がっていました。
この質問に答えてみます。

カテゴリーの表示方法についてなのですが、jQueryのアコーディオンに組み込んで表示をしたいと思っているものの、上手くいきません。
使用しているjQueryはこちらです。
HTMLは以下のようになっており、「h2には親カテゴリ」を、「直下のdivにはその子カテゴリ」を組み込めば表示されると考えています。
<div id="accordion">
<h2 class="current">First pane</h2>
<div class="pane" style="display:block">... pane content ...</div>
<h2>Second pane</h2>
<div class="pane">... pane content ...</div>
<h2>Third pane</h2>
<div class="pane">... pane content ...</div>
</div>

実際にテンプレートを書いてみると、以下のように結構複雑になりました。
解説は明日以降順を追って行います。

<script type="text/javascript" src="<$mt:StaticWebPath$>jquery/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>
<div id="accordion">
<mt:SetVar name="depth" value="0">
<mt:SetVar name="first_div" value="1">
<mt:TopLevelCategories>
  <mt:SubCatIsFirst>
    <mt:SetVar name="depth" op="++">
    <mt:HasParentCategory>
      <mt:If name="depth" eq="2">
      <div class="pane" style="display:<mt:If name="first_div">block<mt:Else>none</mt:If>">
      <mt:SetVar name="first_div" value="0">
      </mt:If>
      <ul>
    </mt:HasParentCategory>
  </mt:SubCatIsFirst>
  <mt:HasParentCategory>
    <li><a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a>
  <mt:Else>
    <h2<mt:SubCatIsFirst> class="current"</mt:SubCatIsFirst>><a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a></h2>
  </mt:HasParentCategory>
  <$mt:SubCatsRecurse$>
  <mt:HasParentCategory>
    </li>
  </mt:HasParentCategory>
  <mt:SubCatIsLast>
    <mt:HasParentCategory>
      </ul>
      <mt:If name="depth" eq="2">
      </div>
      </mt:If>
    </mt:HasParentCategory>
    <mt:SetVar name="depth" op="--">
  </mt:SubCatIsLast>
</mt:TopLevelCategories>
</div>
<script type="text/javascript">
jQuery('#accordion').tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
</script>

お知らせ

カテゴリ一覧のアコーディオン表示

おすすめ