Wikia

Wikia Developers Wiki

WatchlistRandom pageRecent changes

ShowHide2

Talk19
196pages on
this wiki

Note. ShowHide2 is a slightly altered version of ShowHide. ShowHide2 should no longer be used. Its functionality has since been incorporated into ShowHide. See Community:Forum:Requesting ShowHide code repair.

This version was created because the original JQuery version had issues with some of the stylings and the solutions require to edit all the navframes. This is handle/configure and has the exactly same features as ShowHide version its difference is that it provides full compatibility with the old NavFrame from Wikipedia:NavFrame section.

Contents

Feature overview Edit

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.
A complementary pair of NavContent blocks enables
In-place magnify/shrink of an image.
Author-specified word-wrap for both image sizes.

Installation Edit

Add 

importScriptPage('ShowHide2/code.js', 'dev');

to your site's MediaWiki:Common.js. This will import ShowHide2/code.js to your page and any subsecuent update done to the script.

Then add the following lines to your site's MediaWiki:Common.css. This only affects the div NavFrame. 

.NavToggle {
	float:right;
	position:absolute;
	top:0px;
	right:3px;
	z-index:1;
}
.NavHead {position:relative;}

Configuration Edit

You can change the configuration of ShowHide2 by creating a ShowHideConfig object before the import inside either:

or

Description Code Example
autoCollapse

Set by default to 2. This sets the threshold for the automatic hiding of all the divs. This will also affect all the tables that have the autocollapse class. All tables with collapse and divs with NavFrame that are on the page are counted toward this threshold break.

  • Setting it to 0 will hide all divs and tables table and divs with 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 or collapsed class count toward the NavFrame threshold and are never auto-collapsed but can always be manually collapsed.

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

Set to 0 

var ShowHideConfig = {
	autoCollapse: 0
};

Set to 3 

var ShowHideConfig = {
	autoCollapse: 3
};

Set to Infinity 

var ShowHideConfig = {
	autoCollapse: Infinity
};
userLang
(true|false) Set by default to true. This will make ShowHide2 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. To disable it set it to false. 
var ShowHideConfig = {
	userLang: false
};
langCode
You can configure the messages that will be display per language or override existing one. Use the 2 letter code of the language (e.g. english = en), the four variables messages used are "show", "hide", "showAll", and "hideAll". See example on how to override the default labels used for the English language.
  • Note: Only certain languages are configured. You can summit translations at the talk page.
As mention above if you prefer to override the default labels for English (or any language) to a custom ones, you can do it at your personal User:USERNAME/wikia.js or User:USERNAME/monobook.js.

To add or override its the same. If its missing a translations its best to report at the talk page so its add to the main code.

Overriding defaults 

var ShowHideConfig = {
    en: {
	show: "+",
	hide: "-",
	showAll: "expand all",
	hideAll: "collapse all"
    }
};
brackets
You can change the display of the brackets to whatever you desire for example {} or {{}} or [] or [[]] or <[{()}]> or what ever you want to display. The way it works its by grabbing the the full sentence the splitting in half and using each part as needed. 
var ShowHideConfig = {
	brackets: '<[{()}]>'
};
linkBefore
(true|false) Set by default to true. This will prepend links to NavFrame. To make the links append disable it by setting it to false. 
var ShowHideConfig = {
	linkBefore: false
};
Advance information

You can chain multiple configurations in a single declaration just pay close attention to the comma at the end of each configuration the last one does not require a comma. 

var ShowHideConfig = {
	autoCollapse: 3,
	userLang: false,
	linkBefore: false,
	en: {
		show: "+",
		hide: "-",
		showAll: "expand all",
		hideAll: "collapse all"
	},
	brackets: '<[{()}]>',
};


General rules Edit

  • Class are case sensitive so pay attention.
  • Class autocollapse.All table and divs with this class will be hide if the total number of table and dives its equal or superior to the number configure number.

Table collapsible Edit

  • To activate the show/hide add class collapsible to the table.
  • To avoid certain rows to be collapsed add class nocollapse on the rows this will avoid hidding that row with the rest of rows.
  • Nesting collapsible tables is supported. You will have to add class="nocollapse" on the row where the nested table is located to ensure the header row (with the nested show/hide button) remains display.
Wiki markup Rendered 
{| class="collapsible"
!colspan="2"| This is a test
|-
| Column 1 || Column 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
|}
Title
Column 1 Column 2
abc def
123 765
xyz 123
pqr 987
Nested tables 
{| class="wikitable collapsible"
!colspan="2"| Title
|-
| Column 1 || Column 2
|-
| abc || def
|-
| ghi || jkl
|- 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
|}
Title
Column 1 Column 2
abc def
ghi jkl
Embedded table
Column A Column B
the quick
brown fox
xyz 123
pqr 987

Div NavFrame Edit

Use the following class definitions within tag pairs:

  • (need) To activate the show/hide add class NavFrame to the outer div that will warp the 3 following divs (see basic stucture below).
    • Adding class collapsed will hide that NavFrame once the script is loaded.
    • Adding class noautocollapse to avoid auto-hide due to reaching limit set on autoCollapse (see configuration section)
  • (need) Add class NavHead to a div warped inside NavFrame where it will act as a header and where the show/hide links will be placed.
  • (need) Add class NavContent to a div warped inside NavFrame to the block of text or whatever is warp that will be show or hide.
  • (optional) Add class NavPic to a div warped inside NavFrame to obtain the same results as NavContent. This is a code remnant from de.wikipedia and does not work as it was intended (so basicaly avoid its usage).
  • Nesting NavFrame divs is supported.
  • Adding class NavGlobal to an empty div will add the [show all] and [hide all] buttons affecting all NavFrames
  • Note: 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
Basic structure. 
<div class="NavFrame">
<div class="NavHead"> (. Title of hide-able content .) </div>
<div class="NavContent">
(. Content here will be hide-able .)
</div>
</div>
(. Title of hide-able content .)

(. Content here will be hide-able .)

Make it collapse automatically regardless of the global auto collapse limit. 
<div class="NavFrame collapsed">
<div class="NavHead"> (. Title of hidden content-1 .) </div>
<div class="NavContent">
(. This content-1 is initially hidden .)
</div>
</div>
Avoid the auto-collapse because of the global auto-collpase limit. 
<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>
[. Title of hide-able content-2 .]

[. This content-2 does not auto-collapse .]

Nesting of autocollapse tables 
<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-3 .}

{. This content-3 may auto-collapse .}
{. and contains a collapsible table .}

Title
Column 1 Column 2
abc def
123 765
xyz 123
pqr 987
Nesting of multiple NavFrame and Tables 
<div class="NavFrame">
<div class="NavHead"> ([{. Title of hidden content-0 .}]) </div>
<div class="NavContent">
([{. This content-0 is initially hidden and .}])<br/>
([{- Starts insert of 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>
([{- End insert of previous example -}])

</div>
</div>
([{. Title of hidden content-0 .}])

([{. This content-0 is initially hidden and .}])
([{- Starts insert of previous example -}])

collapsed
noautocollapse
[. Title of hide-able content-2 .]

[. This content-2 does not auto-collapse .]

default
{. Title of hidden content-3 .}

{. This content-3 may auto-collapse .}
{. and contains a collapsible table .}

Title
Column 1 Column 2
abc def
123 765
xyz 123
pqr 987

([{- End insert of previous example -}])

NavGlobal DIV placed anywhere on page creates [show all] [hide all] buttons 
<!-- place anywhere on page for [show all] [hide all] buttons -->
<div class="NavGlobal"></div>

Magnify and shrink pictures without leaving the article Edit

Normally, if you click on the magnify sprite, magnify-clip.png , located right-most inside the thumbnail image caption box you are taken away from the article you were browsing to a page in the File namespace where the detail and history for that image can be viewed. The size of the image displayed there may not be the precise size that the author wanted to show the reader. If you click on the image itself you are taken to that same details page.

  • You can use ShowHide2 functionality to toggle between a small image and a magnified image in-situ - i.e. without leaving the currently displayed wiki article.
  • The article text will adjust to flow around the expanded image in whichever way the author has designed it to.
  • The author may specify the precise sizes of the smaller image and the larger image.

This is really just a special application of the NavFrame class but with:

  1. two NavContent div elements instead of just one
  2. a potentially confusing relationship between the "display:none" in-line style and the collapsed in-line class tag
  3. careful placement of {{clr}} so as to disable text-wrap based on whichever image is currently visible

Note that using the NavPic class does not yield the same result. Indeed, the NavPic class currently serves no useful purpose.

Caveat
The style display:none will cause the content of that div element to never be displayed at a browser that has disabled (or does not support) javascript.
Wiki markup Rendered
Note how the combined effect of "collapsed" and "display:none;" is for the 120px thumbnail to be initially VISIBLE with a show button displayed to reveal the larger, hidden image. 
Duis aute ...
<!-- "collapsed" will toggle the coded state
     of the in-line style "display:"         -->
<div class="NavFrame collapsed"> 
<div class="NavHead"></div>
<!-- display:none + collapsed 
     => initially VISIBLE small image        -->
<div class="NavContent" style="display:none;" > 
[[File:Tree.jpg|thumb|120px|Caption here]]</div>
<!-- display:block + collapsed 
     => initially INVISIBLE large image      -->
<div class="NavContent" style="display:block;"> 
[[File:Tree.jpg|thumb|360px|Caption here]]</div>
</div>
Lorem ipsum ...

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Notice that the {{clr}} has been placed inside the div associated with the larger 360px image. 
Duis aute ...
<div class="NavFrame collapsed"> 
<div class="NavHead"></div>
<div class="NavContent" style="display:none;" > 
[[File:Tree.jpg|thumb|120px|Caption here]]</div>
<div class="NavContent" style="display:block;"> 
[[File:Tree.jpg|thumb|360px|Caption here]]{{clr}}</div>
<!-- 
{{clr}} on this line would prevent text-wrap beside thumbnail
-->
</div>
Lorem ipsum ...

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Repeating the same two example but using Right instead of Thumb for the image and also floating the Show/Hide button right rather than the default.
Wiki markup Rendered
Note how the combined effect of "collapsed" and "display:none;" is for the 120px thumbnail to be initially VISIBLE with a show button displayed to reveal the larger, hidden image. 
Duis aute ...
<!-- "collapsed" will toggle the coded state
     of the in-line style "display:"         -->
<div class="NavFrame collapsed"> 
<div class="NavHead" style="float:right;"></div>
<!-- display:none + collapsed 
     => initially VISIBLE small image        -->
<div class="NavContent" style="display:none;" > 
[[File:Tree.jpg|right|120px|Caption here]]</div>
<!-- display:block + collapsed 
     => initially INVISIBLE large image      -->
<div class="NavContent" style="display:block;"> 
[[File:Tree.jpg|right|360px|Caption here]]</div>
</div>
Lorem ipsum ...

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Notice that the {{clr}} has been placed inside the div associated with the larger 360px image. 
Duis aute ...
<div class="NavFrame collapsed"> 
<div class="NavHead" style="float:right;"></div>
<div class="NavContent" style="display:none;" > 
[[File:Tree.jpg|right|120px|Caption here]]</div>
<div class="NavContent" style="display:block;"> 
[[File:Tree.jpg|right|360px|Caption here]]{{clr}}</div>
<!-- 
{{clr}} on this line would prevent text-wrap beside thumbnail
-->
</div>
Lorem ipsum ...

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Updates Edit

May 30, 2011 to this day

Since there is no more code improve. Trying to improve guide on usage.

November 17, 2010

Code redirects to Original JQuery version with an alter configuration setting so it has support for older divs as this fork was intended.

November 19, 2009

Publishing the altered version

See Also Edit

Retrieved from "http://dev.wikia.com/wiki/ShowHide2"
Advertisement | Your ad here

Latest Photos

Add a Photo
58photos on this wiki
See more >

Recent Wiki Activity

See more >

Around Wikia's network

Random Wiki