cubicFUSION Horizontal Accordion


  • jQuery 1.7+ / 1.8+ / 1.9+
  • jQuery Easing (optional)


  • Make sure to load the css definitions before you load jQuery
  • When adding Youtube videos, make sure that the wmode is set to opaque, just add “&wmode=opaque” to the video url.
  • Use Child selectors to prevent inline lists to be handled by the main stylesheet. “.container > ul > li”. Use http://selectivizr.com/ to simulate and use them in IE
  • Bad fonts rendering on IE (Cleartype)
    – check for a windows hotfix
    – set a fixed background color for the container.
  • Apply “position: relative” to content wrappers, to use absolute positioning within.


The package includes many detailed examples to get you started.

Here an example:

$(document).ready(function () {
		eventTrigger: "mouseover",
        openOnLoad: 1,
        cycle: true,
        mouseEnterFunctionName: "mouseEnterTest",
        mouseLeaveFunctionName: "mouseLeaveTest",
        eventAction: function (i) {
            $("#eventRunning").html(" Opening - " + (i + 1));
        completeAction: function (i) {
            $("#eventRunning").html(" Completed - " + (i + 1));
	var test = window.setInterval(function(){
		var data 		= $(".test").hrzAccordion('loopStatus');
		var instance 	= $(".test").hrzAccordion("instanceStatus");

		$("#widthCheck").html("Container "+instance.containerWidth+"px / Content "+instance.finalWidth+"px")
function mouseEnterTest() {
function mouseLeaveTest() {


The current plugin provides some simple options to alter its look and behavior.

containerClass"container"The div container wrapped around the whole list.
listItemClass"listItem"Class assigned to each list item
contentContainerClass "contentContainer"Class that defines the actual container for the content that will be animated
contentWrapper"contentWrapper"A container wrapped around the content to apply special layout definitions
contentInnerWrapper"contentInnerWrapper"Another inner container wrapped around the content
handleClass"handle"Class that defines the look of the handle, this handles the open and close event for each blind
handleClassOver"handleOver"Class that defines the mouse over event for the handle
handleClassSelected"handleSelected"Class that defines the select status of the handle
handlePosition"left"Position of the handle (left | right | bottom | top)
handlePositionArray"left,left,right,right,right"Position each handle differently
closeEaseAction"swing"The close easing animation
The closing speed
openEaseAction500The open easing animation
openOnLoad1Define which container to show on page load. (false, 1, 2, 3, ....)
hashPrefix"tab"Allows you to open containers using a hash tag in the url (index.html#tab1). This defines the prefix to be used.
mouseEnterFunctionNamefunction nameExternal function called when mouse enters container
mouseLeaveFunctionNamefunction nameExternal function called when mouse leaves container
evenActionfunction(i){}Function to be executed on trigger event (click, mouseover...)
eventActionFunctionNamefunction nameExternal function to be executed on trigger event (click, mouseover...) The "eventAction" is ignored in that case!
completeActionfunction(){}Function to be executed on completion of the switch
completeFunctionNamefunction nameExternal function called when the switch completes. The "completeAction" is ignored in that case!
closeOpenAnimation11 - open and close at the same time
2- close all and than open next
cycle 10000Cycle through containers by interval
fixedWidth""Use fixed width for containers. Normally the plugin calculates the width from the main container.
eventWaitForAnimtrueMakes sure to allow no new event to be triggered, until animation has ended
onShowFunctionNamefunction nameExternal function called when the accordion is made visible
showTimeout1000delay the display of the accordion in ms
imageSlicepath to imagean image to use for the handle slices (example6)
imageSliceOverpath to imagean image to use for the handle over slices (example6)


The current plugin provides some simple methods to handle external tasks.

show$(container).hrzAccordion('show',id);container: same the accordion was applied to
id: zero based. 0 for first container and so on
Open content on demand. See example provided with your download.
resize$(container).hrzAccordion('resize');resize accordion, see default.examples.js for usageResize accordion on demand
loopStatusvar object = $(container).hrzAccordion('loopStatus');js object
object.loop (element number - zero based)
object.status ("start" or "end")
holds the current status of the loop (example1)
instanceStatusvar object = $(container).hrzAccordion('instanceStatus');js object
object.finalWidth (content width)
object.elementCount (amount of elements)
object.handleWidth (handle width)
object.containerWidth (container width)
object.container (active container number)
holds the current data of the active accordion instance
startpause$(container).hrzAccordion('startpause');start or pause loop (toggle)holds teh current status of the loop (example1)