Feature overview[]
- Localization
- Customize button labels according to site (or user) language preference.
- Show all / Hide all
- [show all] and [hide all] buttons can be placed anywhere on a page and in multiple locations.
- All NavFrame blocks on the page are affected however, collapsible tables are not affected by these buttons. This behavior is by design.
- Specify collapsed by default
- A NavFrame block or collapsible table that also uses the collapsed class will be hidden by default but can always be manually expanded.
- Auto-collapse threshold
- When the specified number of NavFrame blocks or collapsible tables with the autocollapse class are present on a page then all will collapse by default. The counts are handled separately, so one NavFrame and one collapsible table will not be considered 2.
- Can be overridden for specific NavFrames if the noautocollapse class is also used.
- Specify non-collapsible rows of a table
- Using class="nocollapse" on a row will prevent that row from collapsing.
- Nesting collapsible content
- Nesting collapsible tables is supported.
- Nesting NavFrame blocks is supported.
Configuration[]
To use ShowHide please include ShowHide/code.js in your site's MediaWiki:Common.js using:
importScriptPage('ShowHide/code.js', 'dev');
You can change the configuration of ShowHide by creating a ShowHideConfig object inside either:
- your site's MediaWiki:Common.js or
- your personal User:USERNAME/monaco.js or User:USERNAME/monobook.js depending on what skin you are using.
- autoCollapse
- ShowHideConfig.autoCollapse sets the threshold for default collapse of all collapsible content on a page. When the number of NavFrames or collapsible tables with the autocollapse on the page is equal to or greater than specified number then auto-collapse is triggered.
- By default this is set to 2 meaning for example "If there are two or more NavFrames on the page, then hide them all by default", and likewise for collapsible tables with autocollapse on them.
- You can change this to any number.
- Setting it to 0 will make it so things are always collapsed by default.
- setting it to Infinity will make it so things never auto-collapse. (Note: Infinity is case-sensitive)
- NavFrames with the noautocollapse class do count toward the NavFrame threshold and are never auto-collapsed but can always be manually collapsed.
- NavFrames with the collapsed class do count toward the NavFrame threshold and are always initially collapsed but can always be manually expanded.
- userLang
- (true|false) ShowHide is smart about what language to use to display show/hide messages. Currently by default it will prefer the user's language, but use the content language otherwise, and fall back to English if there are no messages in a desired language. You can disable this by setting the ShowHideConfig.userLang option to false.
- langCode
- Messages for localization of the language used in button labels can be added using the two-character language code as a key (e.g. ShowHideConfig.en or ShowHideConfig.ja) and then creating an object for four messages. The four messages used are "show", "hide", "showAll", and "hideAll". See example below for how to override the default labels used for the English language.
Example[]
var ShowHideConfig = { autoCollapse: Infinity, userLang: true }; importScriptPage('ShowHide/code.js', 'dev');
- If you prefer to override the default labels for, say, English language then you can use langCode key, en, to do so. This might be done in your personal User:USERNAME/monaco.js or User:USERNAME/monobook.js.
var ShowHideConfig = { autoCollapse: 3, userLang: false, en: { show: "more", hide: "less", showAll: "expand all", hideAll: "collapse all" } };
Collapsible table[]
Specify the class collapsible for the table. Optionally specify the class nocollapse for specific rows. viz.
- Nesting collapsible tables is supported.
- Use class="nocollapse" on the row where the nested table is located to ensure its header row (with the nested show/hide button) remains visible.
Wiki markup | Rendered | ||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{| class="collapsible" !colspan="2"| This is a test |- | Column 1 || Column 2 |} |
| ||||||||||||||||||||||
Table with certain rows specified "nocollapse" | |||||||||||||||||||||||
{| class="wikitable collapsible" !colspan="2"| Title |- class="nocollapse" | Column 1 || Column 2 |- class="nocollapse" | abc || def |- | 123 || 765 |- | xyz || 123 |- class="nocollapse" | pqr || 987 |- |} |
| ||||||||||||||||||||||
Nested tables | |||||||||||||||||||||||
{| class="wikitable collapsible" !colspan="2"| Title |- | Column 1 || Column 2 |- | abc || def |- | abc || def |- class="nocollapse" |colspan=2| {| class="toccolours collapsible" !colspan="2" BGCOLOR="#ffffff"| Embedded table |- class="nocollapse" | Column A || Column B |- class="nocollapse" ||the |quick |- ||brown |fox |- |} |- | xyz || 123 |- | pqr || 987 |- |} |
|
[]
Use the following class definitions within tag pairs:
- NavGlobal
- for placing [show all] and [hide all] buttons anywhere on the page
- NavFrame
- defines a NavFrame block which is the outer wrapper for using the classes NavHead, NavContent and NavPic
- NavHead
- the header where the show/hide link will be placed
- NavContent
- block text content that is collapsible (may include a table)
- NavPic
- image content that is collapsible
- Nesting NavFrame blocks (tags using the NavFrame class) is supported.
- Check that all tags are closed. If you see progressive indentation then that is a symptom of a tag that was never closed.
Wiki markup | Rendered | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Default behavior and override behavior | |||||||||||||
; collapsed <div class="NavFrame collapsed"> <div class="NavHead"> [... Title of hidden content(1) ...] </div> <div class="NavContent"> [... This content(1) is initially hidden ...] </div> </div> ; noautocollapse <div class="NavFrame noautocollapse"> <div class="NavHead"> [... Title of hide-able content(2) ...] </div> <div class="NavContent"> [... This content(2) does not auto-collapse ...] </div> </div> ; default <div class="NavFrame"> <div class="NavHead"> [... Title of hidden content(3) ...] </div> <div class="NavContent"> [... This content(3) may auto-collapse ...]<br/> [... and contains a collapsible table ...] {| class="wikitable collapsible" !colspan="2"| Title |- class="nocollapse" | Column 1 || Column 2 |- class="nocollapse" | abc || def |- | 123 || 765 |- | xyz || 123 |- class="nocollapse" | pqr || 987 |- |} </div> </div> |
[... Title of hidden content(1) ...] [... This content(1) is initially hidden ...]
[... Title of hide-able content(2) ...] [... This content(2) does not auto-collapse ...]
[... Title of hidden content(3) ...] [... This content(3) may auto-collapse ...]
| ||||||||||||
Nested NavFrame blocks | |||||||||||||
<div class="NavFrame"> <div class="NavHead"> [... Title of hidden content(0) ...] </div> <div class="NavContent"> [... This content is initially hidden and ...]<br/> [--- contains the previous example ---] ; collapsed <div class="NavFrame collapsed"> <div class="NavHead"> [... Title of hidden content(1) ...] </div> <div class="NavContent"> [... This content(1) is initially hidden ...] </div> </div> ; noautocollapse <div class="NavFrame noautocollapse"> <div class="NavHead"> [... Title of hide-able content(2) ...] </div> <div class="NavContent"> [... This content(2) does not auto-collapse ...] </div> </div> ; default <div class="NavFrame"> <div class="NavHead"> [... Title of hidden content(3) ...] </div> <div class="NavContent"> [... This content(3) may auto-collapse ...]<br/> [... and contains a collapsible table ...] {| class="wikitable collapsible" !colspan="2"| Title |- class="nocollapse" | Column 1 || Column 2 |- class="nocollapse" | abc || def |- | 123 || 765 |- | xyz || 123 |- class="nocollapse" | pqr || 987 |- |} </div> </div> [--- previous example inserted above here ---] </div> </div> |
[... Title of hidden content(0) ...] [... This content is initially hidden and ...]
[... Title of hidden content(1) ...] [... This content(1) is initially hidden ...]
[... Title of hide-able content(2) ...] [... This content(2) does not auto-collapse ...]
[... Title of hidden content(3) ...] [... This content(3) may auto-collapse ...]
[--- previous example inserted above here ---] | ||||||||||||
NavGlobal DIV placed anywhere on page creates [show all] [hide all] buttons | |||||||||||||
<div class="NavGlobal"> <!-- place anywhere on page for [show all] [hide all] buttons --> </div> |
|
Updates[]
- July 2, 2009
- Bugfix for collapsible tables default collapse and nesting of them
- July 1, 2009
- Minor bugfix for show/hide all labels.
- June 30, 2009
- Centralized i18n started and smart choosing of what language to use.
- Modified and fixed ability to configure ShowHide.
- June 29, 2009
- Fix a minor collapsible tables bug so we fully support nesting of collapsible tables in our version
- June 28, 2009
- Support nocollapse on table rows
- June 19th, 2009
- Support noautocollapse class to stop NavFrame from auto-collapsing certain things.
- Suggestion from es.pokemon, switched the a to a span using tabIndex, and added code to allow enter to trigger the show/hide.
- Also support the spacebar.
- June 14th, 2009
- Refactored to use jQuery and posted here.