jquery.vaccordion.jsを使って複数のコンテンツエリアをアコーディオン風に表示する方法をご紹介します。
JavaScript、HTML、CSSの知識がある人なら本記事とデモページを参考に約10分位で出来ると思います。
Contents
ディスプレイ広告
複数コンテンツをアコーディオン表示する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>コンンテンツ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>
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>
jquery.vaccordion.js:複数のコンテンツエリアをアコーディオン風に表示するデモページ
jquery.vaccordion.js:複数のコンテンツエリアをアコーディオン風に表示するデモ
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。