jquery.nestedlist

Creates a browsable nested list.

Features

• Unlimited nesting depth
• Arbitrary number of nested lists per page
• Change events for setting list titles or similar
• Compatible with Firefox, Chrome, Internet Exploder, Opera, Safari, and more

Additional features

• The up-link (anything with class ".nestedlist-up") can be anywhere on the page
• All cards have the same width
• Height is dynamic
• Shows first list on load
• HTML fallback with deactivated javascript possible
• At the moment, child lists can not be shared between list items
• It is possible to create a horizontal list by disabling the animation and setting a width for <li>

Dependencies

• jQuery

Usage

Call "nestedList" on a jQuery object with the topmost <ul> element of the list.

$("ul.demo-list").nestedList()

Optional configuration

$(selector).nestedList({
  optionName: optionValue, ...
})

optionName	description	optionValue
onBeforeChange	called before showing a list	function(-1 or 1, nextList, nestedList)
onAfterChange	called after showing a list	function(-1 or 1, nextList, nestedList)
upButton	for retrieving the upButton anywhere in the document by jQuery-selector or jQuery object. The upButton is one container that is moved around and inserted where it is needed.	string, jQuery
upButtonShow	the default is function(upButton, nextList) { nextList.prepend(upButton) }	function(upButton, nextList)
shiftAnimation	options for jQuery.animate()	object
noScriptLinks	true or a selector relative to the nestedlist container to select links that should be replaced with their content text	boolean, string

Example DOM structure

ul
  li
    content
  li
    content
    ul
      li
      li
      li

See demo/demo.css for an example stylesheet

Methods and objects

nestedListsObject

$.nestedList returns a nestedListsObject

Example

var nestedLists = jQuery(".demo-list").nestedList()

Content

{
  nestedLists: [nestedListObject, ...],
  closeAll: closeAll
}

Methods

|name|description| ----|----|---- |closeAll()|closes all open sub-lists of all nestedLists and shows the toplevel/first list|

nestedListObject

{
  container: container,
  toplevelClass: toplevelClass,
  closeList: closeList
}

Methods

|name|description| ----|----|---- |closeList()|close the currently active sub-list and show its parent list|