jQuery Horizontal Accordion

The Horizontal Accordion provides a vast amount of options to adjust its settings to your liking and allows you to integrate it fast into your website. You have complete design freedom and can interact with the plugin through css, plugin methods and external function calls. The plugin is under constant development. I deliver the foundation and you can go wild on the design :)

Started with the XBOX design :)

DEMO – Youtube / GitHub

Base functionality

• No dependencies
• Optional use of easing plugin
• Close and open content one after the other
• Close and open at the same time
• Choose trigger (mouseover, click …)
• Easily control through external calls
• Open content on load
• Open content through hash tags in the url (#tab1, #tab2…)
• Position of handle (left, right)
• Mixed handle positions – 2 left , 2 right …
• Cycle through content by interval
• Events when animations starts and ends
• Hide content until all has been assembled

Dependencies / Tips

• jQuery 1.7+ / 1.8+
• jQuery Easing (optional)
• Tips
  • 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.

New features for 2.5 / 2.6

• Cleanup of width and container calculation. The full width of the container is used now, all hacks have been removed :)
• Stop/start cycling on mouseenter / mouseleave
• Call external function on complete
• Namespace cleanup
• Clean method layout
• New methods to call content
• More options to add your own external calls
• CSS cleanup & optimization
• Automatic background image slicing for handles + looping
• New resize method
• Refacture the loop to set new loop position, when a button has been clicked
• Animation tweaks

 Coming for 2.7

• complete cleanup
• easy to extend using modular methods, even core methods can be easily overwritten
• easy way to execute new methods on init, eventstart, eventcomplete and eventend
• easy way to extend settings
• after release resizing and looping will be moved to modules
• jQuery 1.7+ required
• tested and working on JQuery 1.9 / 2.0b1
• size reduced
• examples updated
• many other minor fixes with the help of some of you :)

Options Version >= 2.6

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

Option	Default
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
closeSpeed	500
The closing speed
openEaseAction	“swing”
The open easing animation
openSpeed	500
The opening speed
openOnLoad	1
Define 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.
mouseEnterFunctionName	function name
External function called when mouse enters container
mouseLeaveFunctionName	function name
External function called when mouse leaves container
eventAction	function(i){}
Function to be executed on trigger event (click, mouseover…)
eventActionFunctionName	function name
External function to be executed on trigger event (click, mouseover…) The “eventAction” is ignored in that case!
completeAction	function(){}
Function to be executed on completion of the switch
completeFunctionName	function name
External function called when the switch completes. The “completeAction” is ignored in that case!
closeOpenAnimation	1
1 – open and close at the same time 2- close all and than open next
cycle	false
Cycle through containers by interval
cycleInterval	10000
Cycle interval in milliseconds (10000 = 10 seconds)
fixedWidth	“”
Use fixed width for containers. Normally the plugin calculates the width from the main container.
eventWaitForAnim	true
Makes sure to allow no new event to be triggered, until animation has ended
onShowFunctionName	function name
External function called when the accordion is made visible
showTimeout	1000
delay the display of the accordion in ms
imageSlice	path to image
an image to use for the handle slices (example6)
imageSliceOver	path to image
an image to use for the handle over slices (example6)

Methods Version >= 2.5/ 2.6

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

Method	options
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 usage
Resize accordion on demand
loopStatus var 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)
instanceStatus var 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)

History

• Version 2.60.05 (11/2012)
  – cleanup, fixes, new methods
• Version 2.00 (2012)
  – minor cleanups
• Version 2.00 Beta (2011)
  -complete rewrite
• Version 1.00 beta
  – Cleanup of the plugin.
  – Accordion resizes now on window resize
  – use of custom handle content added (see DEMO)
• Version 1.00 alpha
  First plugin release
• Version 0.52
  Disable click for open content
• Version 0.51
  Updated content handling and position of the click handlers. Will be moving this to a plugin and allow a more generic usage.
• Version 0.5
  First release

License

HORIZONTAL ACCORDION LICENSE

Copyright 2012 portalZINE(R) NMN, Alexander Graef, Germany

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Non-Commercial Use:
The Horizontal Accordion is free for non-commercial use (i.e. personal, educational). Redistribution of the code is unrestricted as long as it remains free and in a non-commercial context.

Commercial use:
If you decide to use the Horizontal Accordion for your commercial projects, I ask you to support my work with the purchase of a pro license.

Commercial redistribution of the code is not permitted except by arrangement with portalZINE(R) NMN, Alexander Graef, Germany.