collapsibleToc

This function transforms an ordered list into a collapsible-tree-style list. If the first link of a given node is a wiki page, and you are currently on that page, that branch of the tree will unfold and that nold is highlighted somehow (bold, or whatever CSS styles you set for it). Multiple trees can be made.

It works best as a link list tree in the SideBar, such as in the QuickStart menu to your right. The function:

widget.collapsibleToc(elem,bullet,collapseAll);

elem is either the ordered list itself or some parent element in which the list/toc is the first ordered list in the parent. You can pass an id as a string also.
bullet is a | delimited string representing the two bullet states. You could pass an image, for example. Defaults to "+|-"
collapseAll is a boolean to suppress the expansion of all links. This is useful for cases like when you want to turn the <toc> into a collapsed list (all the links in the toc look like links to the same page). Defaults to false. See Tips for individual control.

Tutorial

To create your link tree, just make a normal ordered list (either WikiStyle or the new editor). If using WikiStyle, it might look like this:

<div id="SomeUniqueId">

# [linkOne]
## [linkOneA]
## [linkOneB]
# [linkTwo]
## [linkTwoA]
### [linkTwoA_i]

</div>

The wrapping div is not necessary if the list is the FIRST ordered list in some easily obtainable element, like one of the sidebar tabs. This wiki, for example, uses the id of the QuickStart menu ("sb_qs") to reference the element.

Once you can reference the element somehow, you just call the function:

<script>
widget.collapsibleToc("SomeUniqueId");
</script>

And that's it! In this wiki, we use the simple code:

<script>
widget.collapsibleToc("sb_qs");
</script>

Go here and here for examples of formatting for the menu.

Tips

The function assumes that the first link on any given level references a link to a page. Therefore, if your link uses Javascript like <a href='#' onclick='someStuff()'>Click me</a>, then that link looks like an anchored link to the top of the page you're on. In other words, it'll expand to that level. To suppress expansion to any given level, attach class="ignore" to that link, like:

# <a href="#" onclick="someStuff();return false;" class="ignore">click me</a>


Page Information

  • 1 year ago [history]
  • View page source
  • You're not logged in
  • No tags yet learn more

Wiki Information

Recent PBwiki Blog Posts