new ng.Accordion (Object options) vs. 1.2.2 Full+Lite

An Accordion widget is a set of collapsible panels that can store a large amount of content in a compact space. Users can hide or reveal the content stored in the accordion by clicking the tab of the panel.

Parameters

Object options vs. 1.2.2 Full+Lite
An optional object to hold the Accordion properties. The ng.Accordion class inherits the ng.PlugIn.options and all it's properties.

Examples

Different Data Types
This example will illustrate the supported data types.
Demo:

In hendrerit mauris at sem sodales tincidunt. Quisque tempor metus tortor, a aliquet leo semper scelerisque. Praesent tempus, arcu ac scelerisque porta, purus massa tempor ipsum, viverra iaculis nisi neque sed velit. Morbi est sem, lobortis congue pharetra ut, imperdiet eu tortor. Nunc porta purus magna, ut ultrices felis sodales sed. Ut vehicula vel urna et pellentesque. Nam nec dapibus risus. Vivamus eu nulla ullamcorper, cursus ante at, tempus erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris sagittis nec velit nec fermentum. Curabitur elementum eros sem, in facilisis ligula facilisis vel.

Sortable with Different Targets
This example illustrates how to make sortable accordions with different targets
Demo:

Accordion 1, Paragraph 1

Accordion 1, Paragraph 2

Accordion 1, Paragraph 3

Accordion 2, Paragraph 1

Accordion 2, Paragraph 2

Accordion 2, Paragraph 3

Accordion 3, Paragraph 1

Accordion 3, Paragraph 2

Accordion 3, Paragraph 3


Adding and Removing Tabs
This examples shows how to add and remove tabs
Demo:

Accordion, Paragraph 1

Accordion, Paragraph 2

Accordion, Paragraph 3

Inheritance Tree

This class inherits the following classes and all their methods and properties. It's recommended to check if any private properties/options are defined before using them. The complete list of inheritted methods and events are listed below the current object Custom Events.
ng.Events ()
ng.PlugIn (options)
ng.Accordion (options)

Methods

Content Types vs. 1.2.2 Full+Lite

HTML, Images, Videos & More

The accordion comes ready with the most common content types supported out of the box and can be easily extended to support additional content. It also supports data attributes to control block elements such as images and iframes.
Function ng.Accordion.add_tab (btn, cnt, pos) vs. 1.2.2 Full+Lite
Adds a new tab to the accordion.
Function ng.Accordion.remove_tab (num) vs. 1.2.2 Full+Lite
Removes a tab.
Function ng.Accordion.get_num_tabs () vs. 1.2.2 Full+Lite
Gets the total number of tabs.
Function ng.Accordion.tab_from_number (num) vs. 1.2.2 Full+Lite
Gets the tab content HTML DIV from the tab number.
Function ng.Accordion.number_from_tab (id) vs. 1.2.2 Full+Lite
Get the number of tab from the content id.
Function ng.Accordion.button_from_number (num) vs. 1.2.2 Full+Lite
Gets the button from the tab number.
Function ng.Accordion.number_from_button (btn) vs. 1.2.2 Full+Lite
Gets the tab number from a button.
Function ng.Accordion.get_tab_height (num) vs. 1.2.2 Full+Lite
Gets the calculated height of the tab content.
Function ng.Accordion.toggle_tab (num) vs. 1.2.2 Full+Lite
Open or close a tab.
Function ng.Accordion.open (num) vs. 1.2.2 Full+Lite
Opens a tab.
Function ng.Accordion.close (num) vs. 1.2.2 Full+Lite
Close a tab.
Function ng.Accordion.is_open (num) vs. 1.2.2 Full+Lite
Checks if a tab is open.
Function ng.Accordion.is_close (num) vs. 1.2.2 Full+Lite
Checks if a tab is closed.
Function ng.Accordion.get_open_tabs () vs. 1.2.2 Full+Lite
Gets an array of all the open tabs content HTML DIVs elements.
Function ng.Accordion.get_close_tabs () vs. 1.2.2 Full+Lite
Gets an array of all the close tabs content HTML DIVs elements.
Function ng.Accordion.resize () vs. 1.2.2 Full+Lite
Resize the accordion and reset all the heights of the open tabs. This method is called when the browser window is resized and will fire the onResize event.
Function ng.Accordion.show_loading (num, value) vs. 1.2.2 Full+Lite
Shows an ng.ProgressBar on top of a tap button. This method fires the onLoading event.
Function ng.Accordion.hide_loading (num) vs. 1.2.2 Full+Lite
Hides the ng.ProgressBar from the tab. This method fires the onLoad event.
Function ng.Accordion.set_keep_open (keep_open) vs. 1.2.2 Full+Lite
Sets the keep open property.
Function ng.Accordion.get_keep_open () vs. 1.2.2 Full+Lite
Gets the keep open property.
Function ng.Accordion.set_multi_open (multi_open) vs. 1.2.2 Full+Lite
Sets the multi open property.
Function ng.Accordion.get_multi_open () vs. 1.2.2 Full+Lite
Gets the multi open property.
Function ng.Accordion.set_max_height (max_height) vs. 1.2.2 Full+Lite
Sets the max height property.
Function ng.Accordion.get_max_height () vs. 1.2.2 Full+Lite
Gets the max height property.
Function ng.Accordion.set_can_sort (can_sort) vs. 1.2.2 Full+Lite
Set the can sort property.
Function ng.Accordion.get_can_sort () vs. 1.2.2 Full+Lite
Gets the can sort property.
Function ng.Accordion.get_sortable () vs. 1.2.2 Full+Lite
Gets the sortable object.
Function ng.Accordion.disable (num) vs. 1.2.2 Full+Lite
Disables all the accordion buttons or the button passed as a parameter. This method will fire the onDisable event (if all buttons are disabled) and each button disabled will fire the onDisableTab event.
Function ng.Accordion.enable (num) vs. 1.2.2 Full+Lite
Enables all the accordion buttons or the button passed as a parameter. This method will fire the onEnable event (if enabling all buttons) and each button enabled will fire the onEnableTab event.
Function ng.Accordion.is_disabled (num) vs. 1.2.2 Full+Lite
Checks if the accordion is disabled. If the parameter num is passed, it will check the tab disabled status.
Function ng.Accordion.is_enabled (num) vs. 1.2.2 Full+Lite
Checks if the accordion is enabled. If the parameter num is passed, it will check the tab enabled status.

Custom Events

In the events' functions, the this will refer to the class object.
Event onAdd vs. 1.2.2 Full+Lite
Fires when a new tab is added.
Event onRemove vs. 1.2.2 Full+Lite
Fires when a tab is removed. The function for this event will receive the tab number that was removed as an argument.
Event onToggle vs. 1.2.2 Full+Lite
Fires when a tab is toggled using the tab button. The function for this event will receive the tab number as an argument.
Event onOpen vs. 1.2.2 Full+Lite
Fires when a tab is opened. The function for this event will receive the tab number as an argument.
Event onClose vs. 1.2.2 Full+Lite
Fires when a tab is closed. The function for this event will receive the tab number as an argument.
Event onResize vs. 1.2.2 Full+Lite
Fires when the accordion is resized.
Event onLoading vs. 1.2.2 Full+Lite
Fires when a tab start to fetch remote content. The function for this event will receive the tab number as an argument.
Event onLoad vs. 1.2.2 Full+Lite
Fires when a tab finish loading remote content. The function for this event will receive the tab number as an argument.
Event onDisable vs. 1.2.2 Full+Lite
Fires when the accordion is disabled.
Event onEnable vs. 1.2.2 Full+Lite
Fires when the accordion is enabled.
Event onDisableTab vs. 1.2.2 Full+Lite
Fires when a tab is disabled. The function for this event will receive the tab number as an argument.
Event onEnableTab vs. 1.2.2 Full+Lite
Fires when a tab is enabled. The function for this event will receive the tab number as an argument.
Event onPreSort vs. 1.2.2 Full+Lite
Fires before the user starts to sort the accordion tabs.
Event onMove vs. 1.2.2 Full+Lite
Fires when a tab is moved during a sort operation. The function for this method will receive three arguments:
  • elm: the moving button HTML Element.
  • trgt: the target button HTML Element.
  • position: the position on the elm in relation to trgt (either before or after).
Event onAppend vs. 1.2.2 Full+Lite
Fires when a tab is added to an empty parent during the sort operation. The function for this event will receive the button HTML Element as an argument.
Event onSort vs. 1.2.2 Full+Lite
Fires when the user finish the sort operation by dropping the element.

ng.Events () Methods

Some of these methods might be overriden by the inheriting class.
Function ng.Events.add_event (evt, func) vs. 1.1.0 Full+Lite
The add_event method will attach an event listener to an object. When the event is fired, the listeners functions will be executed on last added first run approach.
Function ng.Events.add_events (obj) vs. 1.1.0 Full+Lite
This method works the same way as Events.add_event(evt, func) except it takes an object with a list of events and functions.
Function ng.Events.remove_event (evt, func) vs. 1.1.0 Full+Lite
Remove the function func from the event evt queue. When adding the event, you should add the function by reference. Anonymous functions cannot be removed.
Function ng.Events.remove_events (obj) vs. 1.1.0 Full+Lite
This method works the same way as Events.remove_event(evt, func) except it takes an object with a list of events and functions.
Function ng.Events.clear_events (evt) vs. 1.1.0 Full+Lite
Remove all the functions under the event name evt.
Function ng.Events.clear_all_events () vs. 1.1.0 Full+Lite
This function works the same way Events.clear_events(evt) except it removes all the events attached to the object.
Function ng.Events.fire_event (evt_nm, args, evt) vs. 1.1.0 Full+Lite
Executes all the functions in the event evt_nm queue. Functions are executed in lasted added first exectued order.

ng.PlugIn (options) Methods

Some of these methods might be overriden by the inheriting class.
Function ng.PlugIn.get_position () vs. 1.1.0 Full+Lite
Get the plugin holding object position.
Function ng.PlugIn.get_width () vs. 1.1.0 Full+Lite
Get the ng.PlugIn holding object width.
Function ng.PlugIn.get_heigh () vs. 1.1.0 Full+Lite
Get the ng.PlugIn holding object height.
Function ng.PlugIn.set_object (obj) vs. 1.1.0 Full+Lite
Sets the ng.PlugIn holding HTML Element. The HTML Element should hold all the output and handles any events.
Function ng.PlugIn.get_object () vs. 1.1.0 Full+Lite
Gets the HTML Elements that holds the ng.PlugIn output.
Function ng.PlugIn.make_id (txt) vs. 1.1.0 Full+Lite
Creates a unique id for the ng.PlugIn object.
Function ng.PlugIn.get_id () vs. 1.1.0 Full+Lite
Get's the plugin ID.
Function ng.PlugIn.set_language (lang) vs. 1.1.0 Full+Lite
Sets the plugin language and reset the HTML Element direction based on the language.
Function ng.PlugIn.get_language () vs. 1.1.0 Full+Lite
Gets the plugin language.
Function ng.PlugIn.remove () vs. 1.1.0 Full+Lite
Removes the plugin and all it's properties. This method will also remove any HTML Elements that are associated with the plugin.
Function ng.PlugIn.create_options (options, default) vs. 1.1.2 Full+Lite
Create the initial options for the plugin. This method doesn not alter the plugin variables, but return an object that can be assigned to a variable in the plugin.
Function ng.PlugIn.create_events () vs. 1.1.2 Full+Lite
Create the plugin events from the customized option. This method should be called after ng.PlugIn.create_options.
Function ng.PlugIn.get (prop) vs. 1.2.2 Full+Lite
Gets the plugin property. This method will check if there is a getter function for the plugin and return it's value, otherwise it'll return the raw property. This method is useful for getting custom properties.
Function ng.PlugIn.set (prop, value) vs. 1.2.2 Full+Lite
Sets the plugin property. This method will check if there is a setter method for the plugin and call it. Otherwise, it will set the raw property value.This method is useful for setting custom properties.

ng.PlugIn (options) Custom Events

In the events' functions, the this will refer to the class object.
Event onBeforeRemove vs. 1.2.2 Full+Lite
This event will fire right before the plugin (or any object that inherit it, e.g. components) is removed.