JavaScriptで横に開くアコーディオンメニュー

　2008-01-12

　JavaScriptを使って横に開くアコーディオンメニューを紹介します。JavaScriptなのにFlashのような動きのあるメニューが作れます。「prototype.js」「effects.js」「accordion.js」という 3種類のJavaScriptライブラリを利用しており動きは比較的軽快かと思います。タブ数や大きさはJavaScriptとCSSをいじれば自由に変更することができます。

　JavaScriptを使って横に開くアコーディオンメニューを紹介します。JavaScriptなのにFlashのような動きのあるメニューが作れます。JavaScriptライブラリは下記よりダウンロードしてお使いください。直リンクはやめてくださいね。

　・ prototype.js
　・ effects.js
　・ accordion.js

JavaScript

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript" src="accordion.js"></script>
<script type="text/javascript">
			
		Event.observe(window, 'load', loadAccordions, false);

		function loadAccordions() {
			var topAccordion = new accordion('horizontal_container', {
				classNames : {
					toggle : 'horizontal_accordion_toggle',
					toggleActive : 'horizontal_accordion_toggle_active',
					content : 'horizontal_accordion_content'
				},
				defaultSize : {
					width : 340
				},
				direction : 'horizontal'
			});

			topAccordion.activate($$('#horizontal_container .horizontal_accordion_toggle')[0]);
		}
		
</script>

/* 以下は最後の</div>と</body>間に挿入*/

<script type="text/javascript" >
	var verticalAccordions = $$('.accordion_toggle');
	verticalAccordions.each(function(accordion) {
		$(accordion.next(0)).setStyle({
		  height: '0px'
		});
	});
</script>

body部分

<div id="container">
            <div id="horizontal_container" >
            
                <p class="horizontal_accordion_toggle">1</p>
                <div class="horizontal_accordion_content">
                    <p>
                        コンテンツ１
                    </p>  	
                </div>
                
                <h3 class="horizontal_accordion_toggle">2</h3>
                <div class="horizontal_accordion_content">
                    <p>
                        コンテンツ２
                    </p>   	
                </div>
        
                <h3 class="horizontal_accordion_toggle">3</h3>
                <div class="horizontal_accordion_content">
                    <p>
                        コンテンツ３
                    </p>  	
                </div>
                
                <h3 class="horizontal_accordion_toggle">4</h3>
                <div class="horizontal_accordion_content">
                    <p>
                        コンテンツ４
                    </p>   	
                </div>
        
                <h3 class="horizontal_accordion_toggle">5</h3>
                <div class="horizontal_accordion_content">
                    <p>
                        コンテンツ５
                    </p> 	
                </div>
                    
            </div>
	
</div>

CSS

その他のアコーディオンスクリプト

　・ prototype.jsでアコーディオンなタブな横メニュー
　・ JavaScriptでアコーディオンなタグな横メニュー
　・ JavaScriptで動くアコーディオンスクリプト

　JavaScriptの注意点を少しだけ。

［JavaScript］
#horizontal_container .horizontal_accordion_toggle')[0]);
始めに開いているタブを指定します。「0⇒1つ目」「1⇒2つ目」という具合になります。

defaultSize : {width : 340}
大きさを変更するにはCSSだけでなくJavaScriptも変更しないといけないので注意してください。

　※　FC2ブログは若干重いときがあるので別サーバのサンプルもどうぞ。

レッツFC2ブログ　アコーディオンタグ
アコーディオンタグでその他のスクリプトもお楽しみください。