Wikipedia: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):

Soviet and post-Soviet armoured fighting vehicles after World War II
Tanks IS-4 · T-10 · T-54 · T-55 · PT-76 · T-62 · T-64 · T-72 · T-80 Russian: T-90 · Black Eagle · T-95 Ukrainian: T-72MP · T-80UD · T-84 Armoured personnel carriers Tracked BTR-50 · MT-LB · BMP-1 · BMD-1 · BMP-2 · BMP-3 · BTR-T · BMP-T Wheeled BTR-152 · BTR-40 · BRDM-1 · BRDM-2 · BTR-60 · BTR-70 · BTR-80 Russian: BTR-90 Ukrainian: BTR-4 · BTR-94 Self-propelled artillery 2S1 Gvozdika · 2S3 Akatsiya · 2S5 Giatsint-S · 2S19 Msta Rocket artillery BM-14 · BM-21 Grad · FROG-7 · BM-27 Uragan Russian: BM-30 Smerch Air defense vehicles Gun ZSU-57-2 · ZSU-23-4 · Tunguska-M1 Missile 2K11 Krug (SA-4 Ganef) · 9K33 Osa (SA-8 Gecko) · 9K31 Strela-1 (SA-9 Gaskin) · 9K37 Buk (SA-11 Gadfly) · 9K35 Strela-10 (SA-13 Gopher) · 2K12 Kub (SA-6 Gainful) · 9K330 Tor (SA-15 Gauntlet) · S-300 (SA-10 Grumble) Russian: Pantsyr-S1 · 9K38 Buk-M1-2 (SA-17 Grizzly)
List of armoured fighting vehicles by country

How to use

NavFrame divs

With div, you can hide almost anything. There are three main classes: NavFrame, NavHead, NavContent.

The initial state is "show" with link "hide", except when there are more than two of these on a page. To control the initial state, use the method below instead (the content can be the element of a "table" with only one element).

Simple example

You will need to create three div elements:

<div class="NavFrame">
  <div class="NavHead">[... This is the title of your collapsible content ...]</div>
  <div class="NavContent">
    [... The content you want to hide goes here ...]
  </div>
</div>

[... This is the title of your collapsible content ...]

[... The content you want to hide goes here ...]

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:

<div class="messagebox standard-talk NavFrame">
  <div class="somerandomclass NavHead">[... This is the title of your collapsible content ...]</div>
  <div class="NavContent anotherclass">
    [... The content you want to hide goes here ...]
  </div>
</div>

[... This is the title of your collapsible content; 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 collapsible 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 toccolours in the example below is merely for appearance; it is not needed for collapsible to function:

{| class="toccolours collapsible" width="60%"
!colspan="2"| Fun with table columns
|-
| Column 1 || Column 2
|}

Fun with table columns
Column 1	Column 2

One-element example, initially expanded:

Always displayed header
Optionally displayed text Optionally displayed text Optionally displayed text Optionally displayed text Optionally displayed text Optionally displayed text

Auto-collapsing tables

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

{| class="toccolours collapsible autocollapse" width=60%
|-
! colspan="2" | This autocollapse table will collapse because there are at least two collapsible tables on this page.
|-
| Column 1 || Column 2
|}

This autocollapse table will collapse because there are at least two collapsible tables on this page.
Column 1	Column 2

{| class="toccolours collapsible collapsed" width=60%
|-
! colspan="2" | This table will always collapse
|-
| Column 1 || Column 2
|}

This table will always collapse
Column 1	Column 2

One-element example, initially collapsed:

Always displayed header
Optionally displayed text Optionally displayed text Optionally displayed text Optionally displayed text Optionally displayed text Optionally displayed text

Sortable collapsible tables

initially expanded	initially collapsed
numbers name number a 123 b 6 c 45	numbers name number a 123 b 6 c 45

Limitations

Currently, the three Nav* 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 .messagebox.standard-talk).

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

Navigation templates comparison

Template	Collapsible	Header color	Image	Groups	Style (body) parameter/s
{{Navbox}}	collapsible	navbox	Left/right of body	Yes	Yes
{{Navbox with collapsible groups}}	collapsible	navbox	Left/right of body and/or in each list	Yes	Yes
{{Navbox with columns}}	collapsible	navbox	Left/right of columns	No	Yes

Collapsible attributes

Type	CSS classes	JavaScript	Collapses when	Custom initial state	Nesting
Collapsible tables	mw-collapsible	Defined in Common.js	2 or more autocollapse on page	Yes	Yes