Search:


Wisdom.Accordian

Recent Changes
Printable View
Page History
Edit Page

The wisdom Accordian provides a method to create a set of collapsible panes on your web page, utilizing existing HTML page elements. In the current implementation, the Accordian object will not dynamically build the element structure on the page, it must exist before-hand. It is however possible to adapt the HTML element structure upon which the interactivity is built.

module: wisdom

dependancies: wisdom, wisdom.console

constructor:

options:

  • element: String - the element containing the list of accordion panes
  • triggerElementType: String - the tagname of the elements that will act as expand/collapse triggers ('buttons' or 'toggles'). These elements act as a section/pane header for each collapsible pane in the Accordion. Child elements of the element provided, that are of the appropriate type, will be collected together to form the internal list of trigger panels.
  • contentElementType: String - the tagname of elements that will be interpreted as panels containing the content of each pane that will collapse or expand into view. Child elements of the element provided, that are of the appropriate type, will be collected together to form the internal list of content panes.
  • jumpLinkElementType: String - the tagname of the element that will be interpreted as a per-pane jumplink (internal page anchor). The algorithm used to find elements to be used as such is affected by the jumpLinkPosition option (see below)
  • jumpLinkPosition: String - the position of jump-link elements relative to the Accordion pane's section header elements.

The current implementation presumes that the trigger and content elements for each collapsible Accordion page are interleaved, as children within the overall container element, as so: 

<div id="itemlist_accordion">
  <h2>Item 1</h2>
  <div>Item 1 description<div>
  <h2>Item 2</h2>
  <div>Item 2 description<div>
  <h2>Item 3</h2>
  <div>Item 3 description<div>
</div>

Example usage:

The above HTML structure can be turned into an Accordion like so: 

accordian_citylist = new wisdom.ui.Accordian({
	element: "itemlist_accordion",
	triggerElementType: "h2",
	contentElementType: "div"
});

A more complex example might include a jumplink for each Accordion pane, to allow dynamic item focusing and url-linkage: 

<div id="itemlist_accordion">
  <h2><a id="item1" href="javascript:return false;">Item 1</h2>
  <div>Item 1 description<div>
  <h2><a id="item2" href="javascript:return false;">Item 2</h2>
  <div>Item 2 description<div>
  <h2><a id="item3" href="javascript:return false;">Item 3</h2>
  <div>Item 3 description<div>
</div>

The initialization of the Accordion would then appear like this: 

accordian_citylist = new wisdom.ui.Accordian({
	element: "itemlist_accordion",
	triggerElementType: "h2",
	contentElementType: "div",
	jumpLinkElementType: "A",
	jumpLinkPosition: "inside"
});

In the above example, the option jumpLinkPosition is set to "inside" because the <A> elements acting as pane jumplinks are child elements of the pane/section header elements. Alternative values are "before", "after", and "none"

See also:

This is part of the Reference Documentation for the Wisdom Javascript Library? (or wisdom.js)