jquery.vaccordion.js：複数のコンテンツエリアをアコーディオン風に表示してくれる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>アコーディオン風に上下にコンテンツを移動して表示
（各コンテンツエリアをクリックするとエリアが大きく表示されます）</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>コンンテンツ１</h2>


</div>


<div class="va-slice va-slice-2">

<h2>コンンテンツ２</h2>


</div>


<div class="va-slice va-slice-3">

<h2>コンンテンツ３</h2>

	
</div>


<div class="va-slice va-slice-4">

<h2>コンンテンツ４</h2>


</div>


<div class="va-slice va-slice-5">

<h2>コンンテンツ５</h2>


</div>


</div>

</div>


</div>

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

		<script type="text/javascript" src="https://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>

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