今回は、moo.fx [JavaScript] を使って、タブメニューでアコーディオン表示を切り替えるサンプルを作ってみました。
チュートリアルの内容的には新しい物ではありませんが、主要ブラウザ（Safari3・Firefox2&3・IE6・IE7）にも対応していて、カスタマイズしやすく、軽い！
デザインのネタに是非どうぞ。
まずは、デモサイトを見てください。
【タブメニューアコーディオンの作り方（シンプル版）】
1.海外本家サイトからデータをダウンロード
NYOKIGLITTER - Tab Styled Accordion
サイトの文中、『download: tabAccordion.zip (includes images and scripts)』をクリック。
ダウンロードしたzipデータを解凍します。（"tabAccordion"フォルダ）
2.JavaScriptの読み込み
ダウンロードしたフォルダの"scripts"フォルダから、設置したいサイトの直下に"js"フォルダ（名前は好きなもので）を作り、そこに
・moo.fx.js
・moo.fx.pack.js
・prototype.lite.js
をコピーします。
次に、JavaScriptを外部リンクとして読み込ませるため、設置したいhtmlファイルの<head>〜</head>の間に下の3つを書きます。
<script type="text/javascript" src="js/prototype.lite.js"></script>
<script type="text/javascript" src="js/moo.fx.js"></script>
<script type="text/javascript" src="js/moo.fx.pack.js"></script>
次に、アコーディオン表示の肝になる下記のJavaScriptをすぐに修正できるように、htmlファイルの<head>〜</head>の間（上のスクリプトの次で良いです）に下のソースを書きます。
（外部リンクでもOK）
<script type="text/javascript">
/*【名前の説明】
* ClassName('box') : 文章内容部分のCSSを指定します
* ClassName('tab') : タブメニューのCSSを指定します
* duration : エフェクトの表示間隔を指定します
* ul : タブメニューのhtmlタグを指定します (ダウンロード初期設定はh3)
* stretchers[0] : 最初に表示するbox番号を指定します [0~n]
*/
function init(){
var stretchers = document.getElementsByClassName('box');
var toggles = document.getElementsByClassName('tab');
var myAccordion = new fx.Accordion(
toggles, stretchers, {opacity: false, height: true, duration: 600}
);
//hash functions
var found = false;
toggles.each(function(ul, i){
var div = Element.find(ul, 'nextSibling');
if (window.location.href.indexOf(ul.title) > 0) {
myAccordion.showThisHideOpen(div);
found = true;
}
});
if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>
3.CSS記述の追加
CSSを新規作成して、上のJavaScriptのClassNameに該当するCSSと、装飾用のCSSを書きます。
こちらに今回使ったCSSサンプルをがあります。（コピペして使って下さい）
4.htmlコーディング
<body>〜</body>の間に下のソースをコピーします。
<div id="wrapper">
<!-- 横ナビここから -->
<div id="hnav">
<div class="tab"><ul class="tabtxt" title="タブボタン1"><a href="#">タブボタン1</a></ul></div>
<div class="tab"><ul class="tabtxt" title="タブボタン2"><a href="#">タブボタン2</a></ul></div>
<div class="tab"><ul class="tabtxt" title="タブボタン3"><a href="#">タブボタン3</a></ul></div>
<div class="tab"><ul class="tabtxt" title="タブボタン4"><a href="#">タブボタン4</a></ul></div>
<div class="clear"></div>
</div>
<!-- 横ナビここまで -->
<!-- コンテンツ切替ここから -->
<div id="content">
<div class="boxholder">
<div class="box">
<h3>見出し｜タブボタン（１）</h3>
<p>文章が入ります。</p>
</div>
<div class="box">
<h3>見出し｜タブボタン（２）</h3>
<p>文章が入ります。</p>
</div>
<div class="box">
<h3>見出し｜タブボタン（３）</h3>
<p>文章が入ります。</p>
</div>
<div class="box">
<h3>見出し｜タブボタン（４）</h3>
<p>文章が入ります。</p>
</div>
<!-- コンテンツ切替ここまで -->
</div>
</div>
</div>
<script type="text/javascript">
Element.cleanWhitespace('content');
init();
</script>
【ポイント】
（１）JavaScriptの色のついたidと、htmlのclassのidを必ず同じにすること。
（２）</body>のすぐ上に、
<script type="text/javascript">
Element.cleanWhitespace('content');
init();
</script>
を書き、青色の "content"（この場合は文章の内容部分）を同じにすること。
※これを忘れると全く動きません。
以上で、Javascript - タブメニューのアコーディオン表示（シンプル版）は完了です。
基本さえ押さえれば難しくないし、サイトを簡単にリッチコンテンツに変えてくれます。
是非お試しあれ。
![携帯待ち受けFLASHサイト[moSKA：モスカ]](http://weblog.weska.jp/common_img/moska_qr_img.jpg "携帯待ち受けFLASHサイト[moSKA：モスカ]")
コメントする