Navframe

Documentation for dynamic navigation boxes.

Dynamic navigation boxes use a combination of CSS and Javascript to make collapsible navigation boxes. The technical parts comprise style sheet declarations in MediaWiki:Common.css, and Javascript code in MediaWiki:Common.js.

Example (click "show" or "hide" to see the good bits):

NavFrame divs
With div, you can hide almost anything. There are three main classes: NavFrame, NavHead, NavContent. The initial state is for the content shown with a link to "hide", except when the NavContent has style="display:none;".

Simple example
You will need to create three  elements: [... This is the title of your collapsible content ...] [... The content you want to hide goes here ...]

To initially hide the content do this: [... This is the title of the hidden content ...] [... This content is initially hidden ...]

Mixed classes example
You can even apply other classes along with these, making a more styled design rather than if you were to use the standard classes: [... This is the title; it does not have to be plain text, you can get creative here ...] [... The content you want to hide goes here ...]

Collapsible tables
The initial state of any collapsible content can be controlled using a "collapsible table", because it also allows a table with only one element with content, and a header.

Simple example
Tables are simpler to work with, as you merely need to add the   to the table itself. For the [hide]/[show] link to appear, the table's first row must be a header row, i.e. begin (in wikisyntax) with an exclamation mark. The use of the class  in the example below is merely for appearance; it is not needed for   to function:

One-element example, initially expanded:

Auto-collapsing tables
You have two choices of auto-collapse. In addition to the  class, you can add either   or  . The first always initially collapses a table. only initially collapses a table if there are at least two collapsible tables on a page.

One-element example, initially collapsed:

Sortable collapsible tables
{| !initially expanded!!initially collapsed {|class="collapsible collapsed" !numbers


 * }
 * }

Limitations
Currently, the three  classes apply styles of their own. When mixing classes, this causes some of the Nav styles to override other styles (in the above example, NavFrame is overriding the styles from ).

This limitation does not affect collapsible tables.

Accessibility
All browsers from Internet Explorer 5.5 and on (IE5.5/6/7, Firefox, Safari / KHTML, Opera 8/9, etc.) that support JavaScript will properly collapse the elements.

Internet Explorer 5 and browsers which do not support JavaScript will render the elements without the [hide/show] links and will not collapse them.

Templates

 * Template:Hidden