mootools.jsでアコーディオンメニューを設置

　2008-01-13

　スライドメニューの設置方法はこれまで色々紹介してきましたが、今回また違う方法を紹介します。今回は「mootools.js」というJavaScriptライブラリを利用します。比較的軽快に動いていると思います。

information

　「mootools」は公式サイトでダウンロードしてください。

　⇒　http://mootools.net/

比較的簡単にできていてスタイルシートも少ないのでカスタマイズもしやすいかと思います。

body

<p class="accToggler">メニュー1</p>
	<p class="accContent">
	メニュー1の内容
	</p>
<p class="accToggler">メニュー2</p>
	<p class="accContent">
	メニュー2の内容
	</p>
<p class="accToggler">メニュー3</p>
	<p class="accContent">
         メニュー3の内容
	</p>
<p class="accToggler">メニュー4</p>
	<p class="accContent">
	メニュー4の内容
	</p>

JavaScript

<script type="text/javascript" src="/js/mootools.js"></script>
<script type="text/javascript">
var accordion;
var accordionTogglers;
var accordionContents;

window.onload = function() {
        accordionTogglers = document.getElementsByClassName('accToggler');
        
        accordionTogglers.each(function(toggler){
                //remember the original color
                toggler.origColor = toggler.getStyle('background-color');
                //set the effect
                toggler.fx = new Fx.Color(toggler, 'background-color');
        });
        
        accordionContents = document.getElementsByClassName('accContent');
                
        accordion = new Fx.Accordion(accordionTogglers, accordionContents,{
                //when an element is opened change the background color to blue
                onActive: function(toggler){
                        toggler.fx.toColor('#6899CE');
                },
                onBackground: function(toggler){
                        //change the background color to the original (green) 
                        //color when another toggler is pressed
                        toggler.setStyle('background-color', toggler.origColor);
                }               
        });
}
</script>

CSS

<style type="text/css">
<!--
.accToggler{
        margin: 3px auto;
        padding: 3px;
        width: 480px;
        background: #acc95f;
        color: #f4f4f4;
        border: 1px solid #fff;
        cursor: pointer;
}
.accContent{
        margin: 0px auto;
        width: 480px;
}

　※　FC2サーバは遅いときがあるので別サーバのサンプルも用意しました。

レッツFC2ブログ　アコーディオンタグ
アコーディオンタグでその他のスクリプトもどうぞ