FANDOM


Test cases 
Taken from documentation page at dev.wikia.com

Collapsible table Edit

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
|}
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
|-
| 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
|-
|}
Title
Column 1 Column 2
abc def
abc def
Embedded table
Column A Column B
the quick
brown fox
xyz 123
pqr 987


Collapsible NavFrame block Edit

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>
collapsed
noautocollapse
default
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>
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>

Magnify and shrink pictures without leaving the article Edit

Normally, if you click on the magnify sprite, magnify-clip.png , located at bottom left of a displayed image 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.

  • You can use ShowHide 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.

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.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.