Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニック クリエイターが身につけておくべき新・100の法則。

法則85 FAQページはJavaScriptを併用して作成する

リストを表示するテンプレートソース

<div class="qaContainer">

<ul class="tab"><MTCategories>
<li id="qa<$MTCategoryBasename$>"><a href="#qa<$MTCategoryBasename$>_area"><$MTCategoryLabel$></a></li>
</MTCategories></ul>

<MTCategories>
<dl id="qa<$MTCategoryBasename$>_area" class="qaArea">
<MTEntries lastn="0">
<dt><$MTEntryTitle$></dt>
<dd><$MTEntryBody$></dd>
</MTEntries>
</dl>
</MTCategories>

<!-- / .qaContainer --></div>

jQueryダウンロード

• Downloading jQuery - jQuery JavaScript Library

折りたたみ用のJavaScriptソース（qa.js）

• qa.jsダウンロード

JavaScriptを読み込むテンプレートソース

<script type="text/javascript" src="<$MTLink template="jquery"$>"></script>
<script type="text/javascript" src="<$MTLink template="qa"$>"></script>

CSSソース

.irList {
margin: 0 0 20px 0;
}

.irList li {
list-style-type: none;
margin: 0;
padding: 5px;
border-bottom: 1px dotted #999;
}

.irList li img {
vertical-align: baseline;
}

.qaContainer ul.tab {
 zoom: 1;
 overflow: hidden;
 margin: 0;
 padding: 0;
 border-right: 1px solid #999;
}

.qaContainer ul.tab li {
 float: left;
 margin: 0;
 padding: 0;
 border: 1px solid #999;
 border-bottom: 0;
 border-right: 0;
}

.qaContainer ul.tab li a {
 display: block;
 width: 108px;
 padding: 5px 10px;
}

.qaContainer ul.tab li.active {
 background: #CCCCFF;
}

.qaContainer dl {
 clear: both;
 zoom: 1;
 padding: 10px;
 border: 1px solid #999;
}

.qaContainer dl dt {
 font-weight: bold;
 padding-bottom: 5px;
 margin-bottom: 5px;
 border-bottom: 1px solid #999;
}

.qaContainer dl dd {
 padding-left: 15px;
 margin-bottom: 25px;
}