【流用すれば約10分】簡単に複数コンテンツをアコーディオン表示する方法【jquery.vaccordion.js】 DAD UNION

jquery.vaccordion.jsを使って複数のコンテンツエリアをアコーディオン風に表示する方法をご紹介します。
JavaScript、HTML、CSSの知識がある人なら本記事とデモページを参考に約10分位で出来ると思います。

Contents

複数コンテンツをアコーディオン表示するCSSの記述
複数コンテンツをアコーディオン表示するHTMLの記述
jquery.vaccordion.jsを使って複数のコンテンツエリアをアコーディオン風に表示するJavaScriptの記述
jquery.vaccordion.js：複数のコンテンツエリアをアコーディオン風に表示するデモページ

複数コンテンツをアコーディオン表示するCSSの記述

※style.css、JavaScriptが効かない時用のstyleNoJS.cssファイルを読み込みます。styleNoJS.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>

複数コンテンツをアコーディオン表示するHTMLの記述

※アコーディオン表示エリア（id=”va-accordion”）に「Next」「Previous」エリアと、複数コンテンツ（class=”va-slice”）エリア「class=”va-wrapper”」を用意します。必要に応じて変更して下さい。

		<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>コンンテンツ１</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>

jquery.vaccordion.jsを使って複数のコンテンツエリアをアコーディオン風に表示するJavaScriptの記述

※jquery.min.js、jquery.easing.1.3.js、jquery.mousewheel.js、jquery.vaccordion.jsファイルを読み込み、$(アコーディオン表示エリア).vaccordion()を設定します。

		<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>