複数のコンテンツエリアをアコーディオン風に縦スライドで表示してみます。
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>コンンテンツ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="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>