Accordion

function

Accordion()

Option name	Type	Description
selector	domelement_or_jqueryobject	The element that wraps the accordion contents, containing pairs of elements with classes 'js-header'/'header' and 'js-content/content'
options	object	Object contianing required options for this accordion animateTransitions {boolean: true} Indicates whether to open/close sections with animation using either NATION.Animation or jQuery, or not duration {number: 400} The time a panel takes to animate open/closed easing {string: "linear"} The easing function to use when opening and closing sections openPanel {number: -1} Zero-indexed ID of the panel to have opened by default. If left at the default of -1, all sections will be initially closed maxPanelHeight {number: -1} The maximum height a panel can open to before a scrollbar is enabled scrollbarTemplateID {string: ""} An ID referencing a JavaScript template on the current page, containing the HTML for a scrollbar. Must contain classes 'js-scrollbar'/'scrollbar', 'js-track'/'track', and js-handle'/'handle'. If left blank, the default template will be used enableMouseLock {boolean: false} If true, scrolling the mousewheel when hovered over a panel with a scrollbar will not scroll the main page even when the panel's scrollbar is at the top or bottom autoScroll {boolean: false} If true, the window will be automatically scrolled so that the clicked header is at the top of the viewport autoScrollOffset {number: 0} If autoScroll is true, this number represents the distance from the top of the browser to stop at, in pixels

Dependencies:

NATION.Utils
NATION.EventDispatcher
NATION.VerticalScrollbar if scrollbars required
Either NATION.Animation or jQuery

About:

A basic accordion with optional scrollbar support

Header/content pairs are identified by using the class 'js-header' or 'header' for the clickable titles, and 'js-content' or 'content' for the expandable content areas. These are generally expected to sit next to each other as siblings

Both the header element and the content element will have class 'active' added to them when they are open. This allows for style changes to open panels/headers via CSS

Example

PANEL_OPEN_COMPLETE

property

Accordion.prototype.PANEL_OPEN_COMPLETE

Event that fires when a panel has finished opening

PANEL_CLOSE_COMPLETE

property

Accordion.prototype.PANEL_CLOSE_COMPLETE

Event that fires when a panel has finished closing

HEADER_CLICKED

property

Accordion.prototype.HEADER_CLICKED

Event that fires when a header element has been clicked

PANEL_RESIZED

property

Accordion.prototype.PANEL_RESIZED

Event that fires each frame of an open/close animation

getOpenPanelID

method

Accordion.prototype.getOpenPanelID() ->number

Returns the zero-indexed ID of the currently open panel. Returns -1 if no panel is currently open

getTotalSections

method

Accordion.prototype.getTotalSections() ->number

Returns the total number of clickable headers

openPanel

method

Accordion.prototype.openPanel()

Option name	Type	Description
index	number	The zero-indexed ID of the panel to open
immediate	boolean	If set to true, the panel will open without animation

Open a panel by it's zero-indexed ID

closePanel

method

Accordion.prototype.closePanel()

Option name	Type	Description
index	number	The zero-indexed ID of the panel to close
immediate	boolean	If set to true, the panel will close without animation

Close a panel by it's zero-indexed ID

enable

method

Accordion.prototype.enable()

Option name	Type	Description
reopenPanel	boolean	Keep open, or re-open, the panel that was last open when the disable method was called

Re-enable accordion functionality. This will close all panels, except when reopenPanel is set to true, which will keep the previously open panel open.

disable

method

Accordion.prototype.disable()

Disable all accordion functionality on the content. This opens all panels to their full height, and ignores clicks on header

setMaxPanelHeight

method

Accordion.prototype.setMaxPanelHeight()

Option name	Type	Description
The	eigh	new maximum height, in pixels

Change the maximum possible height of a panel

refresh

method

Accordion.prototype.refresh()

Re-initialise the accordion. Useful if the content of the accordion
has been dynamically changed

destroy

method

Accordion.prototype.destroy()

Disable, remove all listeners, and kill off this instance of the class. Permanent!