<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HorrizontalAccordion</title>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.zaccordion.js"></script>
<style>
*{margin:0;padding:0;}
ol,ul{list-style-type:none;}
div#contents{
width:920px;
height:400px;
padding:20px;
background-color:brown;
position:absolute;
margin:-220px 0 0 -480px;
left:50%;
top:50%;
-webkit-box-shadow:0 0 50px rgba(0,0,0,0,5);
}
h1{
width:110px;
height:370px;
position:absolute;
top:20px;
right:20px;
padding:30px 0 0 50px;
background-color:skyblue;}
ul#contentsList{width:760px;}
ul#contentsList li{
width:460px;
position:relative;
overflow:visible;}
ul#contentsList li:nth-of-type(1){
background-color:yellow;}
ul#contentsList li:nth-of-type(2){
background-color:yellowgreen;}
ul#contentsList li:nth-of-type(3){
background-color:purple;}
ul#contentsList li:nth-of-type(4){
background-color:turquoise;}
ul#contentsList li:nth-of-type(5){
background-color:pink;}
ul#contentsList li:nth-of-type(6){
background-color:coral;}
ul#contentsList li h2{
position:absolute;
top:0;
right:0;
height:400px;
padding:50px 15px 0 0;
/* border-right:1px solid #ddd;*/
background-color:aquamarine;}
ul#contentsList li.frame-open h2{
background-color:red;}
</style>
</head>
<body>
<div id="contents">
<h1></h1>
<ul id="contentsList">
<li>
<h2></h2>
<div class="contentsBody">
</div>
</li>
<li>
<h2></h2>
<div class="contentsBody">
</div>
</li>
<li>
<h2></h2>
<div class="contentsBody">
</div>
</li>
<li>
<h2></h2>
<div class="contentsBody">
</div>
</li>
<li>
<h2></h2>
<div class="contentsBody">
</div>
</li>
<li>
<h2></h2>
<div class="contentsBody">
</div>
</li>
</ul>
</div>
<script>
$(function(){
//アコーディオンの設定
var li = $("#contentsList li").toArray().reverse();
$("contentsList").empty().append(li);
$("#contentsList").zAccordion({
timeout:1000, // 自動スライド時の１スライド当たりの表示時間
slideWidth:460, // アコーディオンのコンテンツの全体の幅
width:760, // アコーディオンのコンテンツの全体の高さ
height:400, // スライドするコンテンツ１枚分の幅
speed:440, // スライドするコンテンツ１枚分の高さ
startingSlide:5, // 最初に表示するコンテンツ番号
slideClass:"frame", // スライドさせるコンテンツのli要素に付すクラス名
slideOpenClass:"frame-open", // 開いているコンテンツのli要素に付すクラス名
slideClosedClass:"frame-closed", // 閉じているコンテンツのli要素に付すクラス名
slidePreviousClass:"frame-previous", // 前回開いていたコンテンツのli要素に付すクラス名
easing:"easeInOutCubic", // スライド時のアニメーション
invert:true // 重なり順を逆にして見出しを右に持ってくる
});
});
</script>
</body>
</html>