Wikipedia:NavFrame

NavFrame was a system of collapsible boxes. It used a combination of CSS and JavaScript, the source for which was found in MediaWiki:Common.css and MediaWiki:Common.js.

Deprecation notes
NavFrame has been removed in favour of using the,   and   CSS classes. The CSS and JavaScript was removed after NavFrame was removed from, or replaced in, all articles in which it was used. Content with NavFrame today will display as uncollapsed. Users may wish to update their pages so that their collapsing elements continue to work as they prefer. See below.

Migration
Users should migrate away from NavFrame. They may do so in one of three ways:


 * 1) by selecting an appropriate collapsible template, or
 * 2) by migrating to a table structure, or
 * 3) by migrating the HTML themselves.

Background knowledge for 2 or 3 can be found at MediaWiki wiki.

To migrate the basic HTML with divs, here is the change you need to make:

From To

To migrate in a more pixel-perfect way, see below. This way retains colors, borders, and removes some jumpiness with the navigation toggle and a title, but does require the addition of a new div, as well as merging with any existing styles applied to the NavFrame elements:

From To

How to use
The basic concept here is to use the div element within a Wiki article's markup code to identify certain content (which we'll call the "details" here) that we want the user to be able to "show" or "hide". The markup code used to achieve this effect comprises three main classes:.

The underlying implementation uses JavaScript to add a "show" or "hide" link in the  part, and to turn the visibility of the   part on or off. In web browsers that do not support Javascript, or where Javascript is disabled, the content will always be displayed, and the "show"/"hide" links will not be present.

The default behavior of this code will initially "show" the details, as well as a link to "hide" the details. To reverse the default behavior, so that the details are initially hidden, use  (instead of  ) in the outer div element. Do not add  to the NavContent element, because that will make it impossible for users without Javascript to see the content.

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 ...]

Getting a caption instead of a heading
If you swap the order of the two inner  elements, then you can get an always-visible caption below optionally-hidden content, instead of an always-visible heading above optionally-hidden content:

[... The content you want to hide goes here ...] [... This is the caption below your collapsible content ...]

If the title doesn't fit on one line
If the title is too long, then the formatting is very bad: [... This is the title of your collapsible content ...] [... The content you want to hide goes here ...]

To correct this, you need to add  to the style of the   , and a dummy element to leave space for the "show/hide" link: [... This is the title of your collapsible content ...] [... The content you want to hide goes here ...]

Left-alignment
To have things lined up to the left, add in this line of code  to the first (or whichever)   you want the text inside aligned to the left. Left-alignment Content added here. See how nicely it lines up to the left, instead of being centered? Far easier to read for many things.

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 ).

Accessibility
All browsers from Internet Explorer 5.5 and on (IE6/7/8, Firefox, Safari/Chrome/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

 * Hidden
 * Hidden begin