jquery.vaccordion.js:複数のコンテンツエリアをアコーディオン風に表示してくれるJs



複数のコンテンツエリアをアコーディオン風に
縦スライドで表示してみます。

過去に縦(アコーディオン)系で、
JQUERY.GALLERYSLIDER:複数画像をフルスクリーンで縦スライドできるJS
JQUERY.PARALLAX:パララックス(PARALLAX)な効果を出してくれるJS
SAGSCROLLER:文字や画像を自動で縦スクロールするJS
をご紹介しましたが上記とは違う表示方法です。

1.読込むCSSファイルとCSSの記述例

<style type="text/css" media="all">
<!--
h1{
	text-align:center;
	font-size:18px;
	font-weight:bold;
	padding:10px 0;
	line-height:1.4em;
	text-align:center;
}
h2{
	color:#FFF;
	padding-left:20px;
}
-->
</style>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<noscript>
	<link rel="stylesheet" type="text/css" href="css/styleNoJS.css" />
</noscript>

2.HTMLの記述例

		<div class="container">
			<h1>アコーディオン風に上下にコンテンツを移動して表示<br/>(各コンテンツエリアをクリックするとエリアが大きく表示されます)</h1>
			<div id="va-accordion" class="va-container">
				<div class="va-nav">
					<span class="va-nav-prev">Previous</span>
					<span class="va-nav-next">Next</span>
				</div>
				<div class="va-wrapper">
					<div class="va-slice va-slice-1">
						<h2>コンンテンツ1</h2>

					</div>
					<div class="va-slice va-slice-2">
						<h2>コンンテンツ2</h2>

					</div>
					<div class="va-slice va-slice-3">
						<h2>コンンテンツ3</h2>
	
					</div>
					<div class="va-slice va-slice-4">
						<h2>コンンテンツ4</h2>

					</div>
					<div class="va-slice va-slice-5">
						<h2>コンンテンツ5</h2>

					</div>

				</div>
			</div>

		</div>

3.読込むJsファイルとJavaScriptの記述例

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
		<script type="text/javascript" src="js/jquery.vaccordion.js"></script>
		<script type="text/javascript">
			$(function() {
				$('#va-accordion').vaccordion();
			});
		</script>
</body>
</html>

jquery.vaccordion.js:複数のコンテンツエリアをアコーディオン風に表示するデモ

複数コンテンツを切替えて表示するのは良いのですが、
個人的にその分1ページの容量が大きくなってしまうのではと
心配してしまいます。