<ul id="callMe">
<li>Content 1</li>
<li>Content 2</li>
<li>Content 3</li>
</ul>
/* hide container until all is ready */
.test, .test2,.test3,.test4{
display: none;
}
/*Main Container*/
.container {
width:100%;
}
.container ul{
list-style-type: none;
margin: 0;
padding:0;
}
.container li{
display: inline;
margin: 0px;
padding:0px;
}
/*Content Container*/
.contentContainer {
padding-left: 0px;
float: left;
width:0px;
height: 310px;
overflow:hidden;
}
.contentWrapper{
}
.contentInnerWrapper{
text-align: justify;
padding: 10px;
}
/* Handle*/
.handle{
float: left;
width: 38px;
height: 310px;
margin: 1px;
margin-right: -10px;
background: url(../images/blade.png) no-repeat;
}
.handleOver{
background: url(../images/blade_sel.png) no-repeat;
}
.handleSelected{
background: url(../images/blade_sel.png) no-repeat;
}
$(document).ready(function() {
$(".test").hrzAccordion(
{eventTrigger:"mouseover",
openOnLoad:"",
cycle: true
});
$(".test4").hrzAccordion(
{eventTrigger: "mouseover",
openOnLoad : "2",
handlePositionArray : "left,left,right,right,right"
});
$(".test2").hrzAccordion(
{handlePosition : "right",
openOnLoad : 5,
closeOpenAnimation : 2
});
$(".test3").hrzAccordion(
{containerClass : "container3",
listItemClass : "listItem3",
contentWrapper : "contentWrapper3",
contentInnerWrapper: "contentInnerWrapper3",
handleClass : "handle3",
handleClassOver : "handleOver3",
handleClassSelected: "handleSelected3"
});
});