Top Edit

Example of how show/hide capability was created with just one line added to a wiki's MediaWiki:Common.js page.

See also:

• w:c:dev:ShowHide
• Help:Dynamic navigation

Table wikitext works better than this NavFrame method, because table wikitext can be made to to avoid right-side overlap problems. But it requires CSS styling. See Help:Dynamic navigation and Forum:Collapsed table. Can't change background color. See Forum:Need help with ShowHide script for implementing Show/Hide with the Oasis/Wikia skin.

The show/hide tables on this Cannabis Wiki use the table wikitext method.

See info and examples:

• Category:Collapsible box templates.

The problem Edit

Return to top.

The goal was to put a paragraph of text into a collapsed show/hide table. The wiki did not initially have show/hide capability for tables.

The solution Edit

Return to top.

I read the documentation at w:c:dev:ShowHide.

It says to add an import line into the wiki's MediaWiki:Common.js

I added this line:

• importScriptPage('ShowHide/code.js', 'dev');

to http://cannabis.wikia.com/wiki/MediaWiki:Common.js

Explanation Edit

Return to top.

Nothing else major is required. The heading box and show/hide link placement can be done via inline styling explained in the sections after this one.

If the NavFrame method is used there are overlap problems with stuff on the right side.

So there is an advantage to putting the show/hide link directly after the end of the heading text. That way the show/hide link doesn't get mixed up with stuff on the right side of the page.

Basic show/hide box without inline styling Edit

Return to top.

This wiki has since added CSS styling for collapsed tables. Otherwise the collapsed table in this section would have no heading background color or heading border.

See: http://dev.wikia.com/wiki/ShowHide#Collapsible_NavFrame_block

Here below is the NavFrame method for show/hide tables:

Here is the wikitext for the above show/hide box.

<div class="NavFrame collapsed">
<div class="NavHead">
'''Heading text.''' </div>
<div class="NavContent">
Table content. 
</div>
</div>

Format of heading wikitext Edit

Return to top.

Note: The ending </div> tag must be on the same line as the heading text, or the show/hide link will end up below the header. See the location of the show/hide link in the example below:

Some inline styling Edit

Return to top.

See: http://www.wikia.com/wiki/Forum:Need_a_show/hide_table to understand more.

Here is a plain table (no show/hide) below using inline styling:

Table with inline styling that could be used for a heading.

{| style="border:1px solid black; padding: 4px; background:#ccccff; color:black;" 
|'''Table with inline styling that could be used for a heading.'''
|}

Inline styling for heading background color, table border, etc. Edit

Return to top.

Here is a show/hide table with inline styling used for the heading background color, and to create the internal table border and color.

The ColorZilla addon for Firefox can be used to pick colors from other tables and header backgrounds.

Even with CSS styling I had to add a non-breaking space in front of the header caption text in order to separate the first word from the left side.

&nbsp;

Here is the wikitext for the above table:

<div class="NavFrame collapsed">
<div class="NavHead" style="border:1px solid black; background:yellow; color:black;">
&nbsp;'''Heading text.''' </div>
<div class="NavContent">
{| style="border:1px solid red;" 
|Table content. 

A border and background color is not added by default to the table content here. 

The table content has very little padding by default. 
|}
</div>
</div>