Extension:NavContent

NavContent is an extension that implements a type of navigational frame, i.e. a mechanism for users to expand (and collapse) certain page content by clicking on a link. This extension goes a bit beyond the simplest form of navigational frame and the main features of this implementation are
 * show and hide content,
 * dynamic loading of content,
 * toggle between content, and
 * step through content.

Show and hide content
Insert the following line of code in your wiki text

This will create a simple navigational bar.


 * [[image:NavContent_A.png]]

If you click on the "Answer" link the content associated with this link will be revealed. In this case it will just be a link to a non-existent page "Answer to exercise 1.1".


 * [[image:NavContent_B.png]]

One more click on the "Answer" link will hide the content again.

Dynamic loading of content
Continuing with the example above, you should now create a new page "Answer to exercise 1.1" in the wiki with the following content:

If you now click on the "Answer" link, on the page containing the navigation bar, you will this time first see a flash of a loading message


 * [[image:NavContent_C.png]]

and then the content of your newly created page is inserted instead of the red-link you saw before.


 * [[image:NavContent_D.png]]

Toggle between content
You should now expand the NavContent code to:

This time the navigation bar contains two links "Answer" and "Solution".


 * [[image:NavContent_E.png]]

These links will individually show/hide the content associated with them. If, for example, you click on "Solution" a link to the non-existent page "Solution to exercise 1.1" will be folded out.


 * [[image:NavContent_F.png]]

Now, clicking on "Answer" will replace the current content with the content associated with the "Answer" link, i.e. the "Answer" and "Solution" links toggle each other.


 * [[image:NavContent_G.png]]

(You can, of course, have any number of links in the navigational bar and they all toggle each other.)

Step through content
To complete this example you should now create a page "Solution to exercise 1.1" in the wiki with the following content:

On the page containing the  function the text from the page "Solution to exercise 1.1" is, as expected, injected as the content under the "Solution" link. However, if you click on "Solution" only the text up to the first  is displayed and a second navigational bar is displayed at the bottom.


 * [[image:NavContent_H.png]]

You can use this so-called progress bar to reveal or hide parts of the page with the links "Show more", "Show less", "Show all" and "Hide all". For example, clicking on "Show more" will show the second part of the solution.


 * [[image:NavContent_I.png]]

(As you might have guessed: inserting more  lines will subdivide the included material into more parts for the user to step through.)

Show full content on printable version
If you click on the "Printable version" link in the toolbox (located in the sidebar of the page), then the resulting printable page will contain all loaded material in an expanded view.


 * [[image:NavContent_J.png]]

Save the code
Create the directory  and save the code in the files ,  ,  ,  ,   and  , respectively, in that directory. You should also download the image file  and save it in the same directory. (Optionally, download a suitable image from www.ajaxload.info.) This is the image that is shown while content is being loaded.

Configure the extension
Add the following lines at the end of the file

Further configuration:   If you want to render math with MathJax on included content, then you need to add the following lines to the file  before   is included:

(If you do this, make sure you have the Extension:Math installed and configured to render math via MathJax, see MathJax.)  You can disable any button by setting its value to "False" in the $wgNavContentProgressBar array, before  is included:

(Default value is True).   If you do not want all content to be expanded when the user is viewing a printable version of the page then you should write

before  is included.   You should consider changing the two style sheet files  and. At present they are merely useful for very simplistic needs.  

Loading.gif
Right-click and save this image:

History

 * Version 0.9:Initial version.
 * Version 0.9.1:Pages referenced by #NAVCONTENT are now allowed to contain a slash. (Bug reported by Daniel E. Forester).
 * Version 0.9.2:German translation of messages. (Thanks to Ruedi Seiler).
 * Version 0.9.3:French translation of messages.
 * Version 0.9.4:Fix Opera bug.
 * Version 0.9.5:Small bug fix.
 * Version 1.0.0:Migrated for use with MediaWiki 1.21 and ResourceLoader.
 * Version 1.0.1:Some further migration and added external rendering of math on included content.
 * Version 1.0.2:Added disabling buttons feature.
 * Version 1.0.3:Spanish translation of messages. Fix German translation of messages.