CHECKING STATUS
I AM LISTENING TO
|

jQuery Horizontal Accordion

21. February 2013
.SHARE

Table of Contents

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 :)

portalZINE NMN | Development meets Creativity | portalzine nmn development meets creativity blog

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.

OptionDefault
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
closeSpeed500
The closing speed
openEaseAction“swing”
The open easing animation
openSpeed500
The opening speed
openOnLoad1
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.
mouseEnterFunctionNamefunction name
External function called when mouse enters container
mouseLeaveFunctionNamefunction name
External function called when mouse leaves container
eventActionfunction(i){}
Function to be executed on trigger event (click, mouseover…)
eventActionFunctionNamefunction name
External 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 name
External function called when the switch completes. The “completeAction” is ignored in that case!
closeOpenAnimation1
1 – open and close at the same time
2- close all and than open next
cyclefalse
Cycle through containers by interval
cycleInterval10000
Cycle interval in milliseconds (10000 = 10 seconds)
fixedWidth“”
Use fixed width for containers. Normally the plugin calculates the width from the main container.
eventWaitForAnimtrue
Makes sure to allow no new event to be triggered, until animation has ended
onShowFunctionNamefunction name
External function called when the accordion is made visible
showTimeout1000
delay the display of the accordion in ms
imageSlicepath to image
an image to use for the handle slices (example6)
imageSliceOverpath 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.

Methodoptions
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.

Let’s Talk!

Looking for a reliable partner to bring your project to the next level? Whether it’s development, design, security, or ongoing support—I’d love to chat and see how I can help.

Get in touch,
and let’s create something amazing together!

RELATED POSTS

Are JavaScript polyfills still relevant in today’s development landscape? It’s a question I get asked frequently in consultations and tech discussions, especially as browsers have become more standardized. Let me break this down for you with some real-world perspective. What Are JavaScript Polyfills (And Why We Used to Need Them) If you’ve been in web […]

Maintaining up-to-date Docker containers is critical for security and functionality, but manually updating containers across all your deployments can be tedious and error-prone. This is where Watchtower comes in – a powerful tool that automates the process of keeping your Docker containers fresh and updated. “I am actively using it locally and externally on my […]

Alright, let’s dive straight into it. You’re probably here because you’re wondering about the future of digital kiosks. What are the hot new design trends for digital kiosk solutions in 2025? As a full-stack developer and someone who’s been in the trenches for two decades, I’ve seen a few tech cycles come and go. Let […]

Alexander

I am a full-stack developer. My expertise include:

  • Server, Network and Hosting Environments
  • Data Modeling / Import / Export
  • Business Logic
  • API Layer / Action layer / MVC
  • User Interfaces
  • User Experience
  • Understand what the customer and the business needs


I have a deep passion for programming, design, and server architecture—each of these fuels my creativity, and I wouldn’t feel complete without them.

With a broad range of interests, I’m always exploring new technologies and expanding my knowledge wherever needed. The tech world evolves rapidly, and I love staying ahead by embracing the latest innovations.

Beyond technology, I value peace and surround myself with like-minded individuals.

I firmly believe in the principle: Help others, and help will find its way back to you when you need it.