[]
The Edittools palette appears whenever you are editing and is located near the page footer. When you click the NavFrame link in that toolbox a line of markup code gets inserted in the edit window at the current cursor location. If you have selected a block of text before clicking that link then the selected text will be used as the collapsible content.
<div class="NavFrame collapsed"><div class="NavHead">head</div><div class="NavContent">SELECTED</div></div>
- this yields
- a collapsible content block (NavContent),
- a heading/title block above that (NavHead) - this is where the Show/Hide button will be created
- and an all encompassing wrapper (NavFrame)
- If any text was highlighted before you clicked then that highlighted block of text will appear inside the NavContent div tags - that is the collapsible content
- you can insert text immediately before and immediately after NavContent divs
- you can insert text immediately before and immediately after NavHead divs
- and of course you can insert text before and after the outer wrapper or frame (Navframe) divs
- You no longer need to be very careful when inserting heading text inside the Navhead pair of divs!
- Keep the opening and closing div tags for Navhead on the one line (line wrap is fine just don't insert a new line.
- Understand that the Show/Hide button will be inserted as div.NavToggle immediately after the div.NavHead container (i.e. an insertAfter operation and not an append operation)
- See the table for examples of 9 pairings of heading and button alignment.
Collapsible content tool in edit tool bar[]
If you are not using the WYSIWYG editor but you prefer toolbar icons versus the plain-text edittool palette then copy this javascript into one of your personal customization files.
- www.wikia.com/wiki/Special:MyPage/global.js (recommended)
- vsk.wikia.com/wiki/Special:MyPage/monaco.js (alternative)
if (mwCustomEditButtons) {
mwCustomEditButtons.push({
"imageFile": "http://images3.wikia.nocookie.net/central/images/e/e3/WikiTable.PNG",
"speedTip": "Collapsible content",
"tagOpen": '<div class="NavFrame collapsed"><div class="NavHead"><!--optional heading--></div><div class="NavContent">',
"tagClose": "</div></div>",
"sampleText": "insert collapsible content"
});
}
Button placement options[]
In each cell of the colored table a different position of the show/hide button relative to the word "head" is displayed. The markup used in each cell can be viewed by clicking on the "show" button. The baseline wiki markup code is shown below for comparison against the markup displayed in any given cell.
You should copy and paste this into your sandbox for further tweaking as required.
A normal heading that is (default) left aligned works perfectly well with one important caveat. The wiki markup that starts a normal heading (=, ==, ===, ====, etc.) must be the first character on a new line. You must not insert any HTML markup ahead of it on the same line or the wiki markup for he section heading will not be recognized by the parser.
- Tip
- Instead of a regular heading use a piece of bold text or the
;Headingmarkup code. A regular heading code will cause an edit link to be generated near the right margin and that may interfere with the placement of the Show/Hide button.
- raw markup as inserted by the "NavFrame" link in "edittools"
<div class="NavFrame collapsed"><div class="NavHead">head</div><div class="NavContent">SELECTED</div></div>
- There is nothing especially useful about having all the wiki markup on one line and seeing it line-wrap in your editor window or go off screen in your browser window. Indeed the code is much easier for the human eye to parse if it is broken into several shorter lines. Therefore, just 5 new lines have been inserted to produce the tidy block of code that you see below. Brief text were also added to display what happens as the content expands and collapses. This is the reference baseline for comparison against the markup you will find in the table.
Markup tweaking[]
Baseline markup
before NF <div class="NavFrame collapsed"> before NH<div class="NavHead">head</div> before NC<div class="NavContent"> SELECTED</div> after NC</div>after NF