This is the talk page for discussing improvements to the ShowHide/Archive 2 page.



Please add the Italian messages:

  • Show: Mostra
  • Hide: Nascondi
  • Show all: Mostra tutti
  • Hide all: Nascondi tutti

I don't know if you prefer them capitalized or not, it's up to you. Question: is it possible to add a "generic" version, with "+" and "-"? Leviathan 89 19:01, October 8, 2011 (UTC)

Added. It is possible to do so for your wiki by including this after your import:
var ShowHideConfig = {
	userLang: false,
	en: {
		show: "+",
		hide: "-"
Replacing en for whatever language the wiki uses for its content. I hope that helps. Cheers, grunny@fandom:~$ 08:59, October 9, 2011 (UTC)


Can a nonlingual symbolic version be added?

Show "+"
Hide "-"
Show All "⊕"
Hide All "⊖"

A default non-lingual symbolic version would be good for people to select if they don't want to default to English. (maybe under language tag "mul" ? )

ForestMonthZero 06:32, October 12, 2011 (UTC)

There is an example and instructions how anyone can do it in their wiki if they want. The idea of internationalization its so other languages can benefit on if we use the simples then there is no point on internationalization --Cizagna (Discusión) • HelperCentral hispana 01:24, 12 November 2011 (UTC)

Font Famlily

I took the liberty to regroup the localizations request at the beginning, (I also added a request for Italian), undo it if I shouldn't. I saw a comment above that was talking about the class "collapseLink" of the links, is it still valid? So can I customize that class? If it's possible you should mention it in the documentation as well. I'd like to change the font family to a monospace family, since I like [show], [+]... more than [show], [+]. Leviathan 89 19:31, October 8, 2011 (UTC)

The "collapseLink" class is still there, but it works on what is between the two square brackets, to affect both the square brackets and the + or show, use the class "collapseButton" instead. I hope that helps. Cheers, grunny@fandom:~$ 09:02, October 9, 2011 (UTC)

Thank you, you should add a little explanation of this in the page itself, other users can found this interesting. Leviathan 89 10:15, October 9, 2011 (UTC)


This is puzzled me for a while... is there a reason why the collapsible tables in wiki code haven't that sort of "animation" the collapsible tables in HTML have? An example:

Table in Wiki code
Column 1 Column 2

I see the first table "instantly" show/hide while the second has a more "dynamic" effect. Can this be fixed/improved? Leviathan_89 23:37, October 11, 2011 (UTC)

Ah and shouldn't the "show link" in the HTML table be on the right instead of being under the title? Leviathan_89 23:39, October 11, 2011 (UTC)
divs aren't tables. This would be the HTML equivalent of your example table:
<table class="collapsible">
      <th colspan="2">Table in Wiki code</th>
      <td>Column 1</td>
      <td>Column 2</td>
As you can see, it's quite different. Simply put, divs are used to mark sections of a page. ShowHide is basically two scripts rolled into one, one for collapsing tables and one for collapsing divs. The part for collapsing divs uses the animation while the part for collapsing tables does not (anymore). If I recall correctly, the animation was removed from the table part on purpose because it was causing the script not to work properly.
Regarding your second question, the "show" button appears on a new line in your div example because of the extra line breaks you have in there. Setting it up like this would make the button show up in the proper position:
<div class="NavFrame collapsed">
   <div class="NavHead">[... Table in HTML ...]</div>
   <div class="NavContent">[... This content(1) is initially hidden ...]</div>
-- Porter21 (talk) 09:31, October 13, 2011 (UTC)
Thank you, too bad for the animation. Leviathan_89 22:07, October 13, 2011 (UTC)

Bulgarian language

Show: Покажи

Hide: Скрий

Show All: Покажи всички

Hide All: Скрий всички

That's all about it. Thanks!  Telinc1  Talk  Email Me  Contribs  Telinc`s Wiki  15:18,10/15/2011 15:18,10/15/2011 

Done. Cheers, grunny@fandom:~$ 14:21, October 17, 2011 (UTC)


Is margin-left on .collapseButton intented? It gives very strange display, pushing the text on the left of it to the right. Using languages other than English has the "show/hide" on top of the text...
Wyz @fandom 21:54, October 17, 2011 (UTC)


Is there a way to show/hide columns instead of rows? Rauleli 21:00, October 29, 2011 (UTC)

No. HTML builds the tables by rows and inside those rows are the "cells" that give the illusion of columns. --Cizagna (Discusión) • HelperCentral hispana 14:00, 12 November 2011 (UTC)


Would it be possible to have the navframe button placed just like the table collapse buttons? Thanks, --Kangaroopowah- Talk 01:07, December 19, 2011 (UTC)

Show-Hide Appendage

Any way that we can get the Show-Hide text to show immediately after the Header text for the collapsible table? Currently it is aligned to the far right of the caption block. Goldbishop 03:29, January 15, 2012 (UTC)

Hungarian localization

show: kibontás
hide: elrejtés
showAll: összes kibontása
hideAll: összes elrejtése
TK-999 18:46, February 29, 2012 (UTC)
Added. Thanks for posting them! grunny@fandom:~$ 12:38, March 2, 2012 (UTC)

Why double brackets?

Why do double brackes appear around show/hide links? This is both confusing and misleading. -- Fandyllic (talk · contr) 9 Mar 2012 12:52 PM Pacific

It might have been to show that it could be changed or just a personal preference (but this is just guessing), as Dantman set it here. I've removed it for now and added an example to the docs. :) Cheers, grunny@fandom:~$ 03:49, March 10, 2012 (UTC)

Change "hide" or "show"

Is it possible to customize the "hide" or "show" buttons to something like "Hide unofficially supported systems" or "Show unofficially supported systems"? Iggyvolz 01:34, March 18, 2012 (UTC)


This is for Chinese:
Show: 显示
Hide: 隐藏
Show All: 全部显示
Hide All: 全部隐藏
Sam Wang 09:55, April 11, 2012 (UTC)

Added, thanks for posting the translations :). Cheers, grunny@fandom:~$ 09:17, April 13, 2012 (UTC)

Portuguese (Portugal)

    pt: {
         show: "Mostrar",
         hide: "Esconder",
         showAll: "Expandir Todos",
         hideAll: "Esconder Todos"

-- J r o o k s j r (C | T/D | E) 38 contributions and counting. 02:36, April 14, 2012 (UTC)

Added. grunny@fandom:~$ 11:48, April 16, 2012 (UTC)

Portuguese (Brazil)

    pt-br: {
            show: "Mostrar",
            hide: "Esconder",
            showAll: "Expandir Todos",
            hideAll: "Esconder Todos"

P.S. You might have to change the coding to be like OasisToolbarButtons where they placed the language codes inside of single quotes " ' " because I was told that variables can not have the dash " - " in its name.

    'pt-br': {
            show: "Mostrar",
            hide: "Esconder",
            showAll: "Expandir Todos",
            hideAll: "Esconder Todos"

-- J r o o k s j r (C | T/D | E) 38 contributions and counting. 02:36, April 14, 2012 (UTC)

Added. And yep, that's right, see my explanation of why. Thanks for posting the translations. :) Cheers, grunny@fandom:~$ 11:49, April 16, 2012 (UTC)

Monobook bug

Not sure whether to post this here, but ShowHide seems to be malfunctioning in Monobook in a template on Star Wars Fanon; see the Oasis and Monobook for comparison. I'm not sure what difference is causing this. TK-999 17:50, April 18, 2012 (UTC)

It looks like you have the actual script code on the wiki on the MediaWiki:common.js page, as a result of doing this, it is not updated when the code is updated here on the dev wiki.
Your or the wiki's admins need to replace
// BEGIN Dynamic Navigation Bars (experimantal)
// This script is from [[Wikipedia:MediaWiki:Monobook.js]]/[[Wikipedia:MediaWiki:Common.js]].
// set up the words in your language
var NavigationBarHide = '[hide]';
var NavigationBarShow = '[show]';
// set up max count of Navigation Bars on page,
// if there are more, all will be hidden
// NavigationBarShowDefault = 0; // all bars will be hidden
// NavigationBarShowDefault = 1; // on pages with more than 1 bar all bars will be hidden
var NavigationBarShowDefault = 1;
// shows and hides content and picture (if available) of navigation bars
// Parameters:
//	 indexNavigationBar: the index of navigation bar to be toggled
function toggleNavigationBar( indexNavigationBar ) {
	var NavToggle = document.getElementById( 'NavToggle' + indexNavigationBar );
	var NavFrame = document.getElementById( 'NavFrame' + indexNavigationBar );
	if ( !NavFrame || !NavToggle ) {
		return false;
	// if shown now
	if ( == NavigationBarHide ) {
		for ( var NavChild = NavFrame.firstChild; NavChild != null;
			NavChild = NavChild.nextSibling
			if ( NavChild.className == 'NavPic' ) { = 'none';
			if ( NavChild.className == 'NavContent' ) { = 'none';
		} = NavigationBarShow;
	// if hidden now
	} else if ( == NavigationBarShow ) {
		for ( var NavChild = NavFrame.firstChild; NavChild != null;
			NavChild = NavChild.nextSibling
			if ( NavChild.className == 'NavPic' ) { = 'block';
			if ( NavChild.className == 'NavContent' ) { = 'block';
		} = NavigationBarHide;
// adds show/hide-button to navigation bars
function createNavigationBarToggleButton() {
	var indexNavigationBar = 0;
	// iterate over all < div >-elements
	for( var i = 0; NavFrame = document.getElementsByTagName( 'div' )[i]; i++ ) {
		// if found a navigation bar
		if ( NavFrame.className == 'NavFrame' ) {
			var NavToggle = document.createElement( 'a' );
			NavToggle.className = 'NavToggle';
			NavToggle.setAttribute( 'id', 'NavToggle' + indexNavigationBar );
			NavToggle.setAttribute( 'href', 'javascript:toggleNavigationBar(' + indexNavigationBar + ');' );
			var NavToggleText = document.createTextNode( NavigationBarHide );
			NavToggle.appendChild( NavToggleText );
			// Find the NavHead and attach the toggle link
			// (Must be this complicated because Moz's firstChild handling is borked)
			for( var j = 0; j < NavFrame.childNodes.length; j++ ) {
				if ( NavFrame.childNodes[j].className == 'NavHead' ) {
					NavFrame.childNodes[j].appendChild( NavToggle );
			NavFrame.setAttribute( 'id', 'NavFrame' + indexNavigationBar );
	// if more Navigation Bars found than Default: hide all
	if ( NavigationBarShowDefault < indexNavigationBar ) {
		for( var i = 1; i <= indexNavigationBar; i++ ) {
			toggleNavigationBar( i );
hookEvent( 'load', createNavigationBarToggleButton );
// END Dynamic Navigation Bars


importScriptPage('ShowHide/code.js', 'dev');
or some portion of the code, since you have it intertwined with Navframe.
-- J r o o k s j r (C | T/D | E) 38 contributions and counting. 18:49, April 18, 2012 (UTC)
Thanks for the help! Somehow failed to notice this in the old heap of code. Thanks again. TK-999 17:15, April 19, 2012 (UTC)


Thank you for adding korean translation.

  • Show: : 보이기
  • Hide: : 숨기기
  • Show all : 모두 보이기
  • Hide all : 모두 숨기기

I'm not that sure I can write at the middle of page. Cafeinlove 15:14, April 24, 2012 (UTC)

Replaced. Cafeinlove 09:17, April 25, 2012 (UTC)
Added. Thanks for posting the translations! :) grunny@fandom:~$ 07:43, April 28, 2012 (UTC)

Can someone help me, please?

I am trying to show/hide div here, I added the code to the js file nothing is happening really. Except my div moved to the left! I find it strange that the js code goes "importScriptPage" but the way to invoke it is by using class="collapsible"? That doesn't look right?!

Ok so, this is a simple common template on the mainpage that's supposed to link to itself (been there for a long time but I want to give users ability to get it out of the way if they want) it sits here... where exactly in this page is the code to invoke it, that page doesn't look complete, emphasizing more in the language input that the code itself. Am I missing something, if so where do I find it? --Liliana (my talk). 00:36, April 28, 2012 (UTC)

Oh I see I found it, it has a link to this I didn't realize I also needed that. Thanks anyway. --Liliana (my talk). 06:22, April 28, 2012 (UTC)

Tagalog (Philippines)

		// Tagalog
		tl: {
			show: "ipakita",
			hide: "itago",
			showAll: "ipakita lahat",
			hideAll: "itago lahat"

ReignBough 04:26, April 29, 2012 (UTC)

Show/Hide to Right

Hi, this must be one of the most discussed and complex "simple" features on wikia!!!

I have such a headache from digesting so many dozens of discussion pages on this, including so many variations and contradictions - especially when several pages instruct you to specifically copy lots of content into your common.css and common.js page, and other pages tell you to simply only add one import line into your common.js page.

From so many discussions and requests for help I can see admins and wikia staff (people who actually understand the code) looking at peoples wiki sites and seeing and removing and fixing these duplicate codes. It's all so confusing.

I have both collapsible tables working (with both class=collapsible and class=mw-collapsbile - yet another confusing conflict and both look slightly different to each other!!!) and also div navhead working quite well (only since I removed all the css and js code and replaced it all with the one-line import line in js).

But no matter how much I search, I still can not find the illusive answer to:

How do you make the Show/Hide button appear at the right of the table / div instead of immediately to the right of the Header. I can make BOTH the header and the button appear on the left, center, or the right, but I can't make the Header appear on the Left or Center with the Button on the Right ...?!?! Like all the examples on Community and Dev seem to be but not on other wikias

I have seen this question asked many many times and yet no answer anywhere?!

(eg: Asked here but not answered:

Here is my initial use of the code:

How can I make the headers align center/left and the button to the right like: and

I have looked at the source of all the examples in detail and looked at the source of common.css and common.js in detail and copied them exactly to test pages and live css and js pages, but my header and button are always hard-up adjacent to each other!

Please help! Thanks. Dollars_small.png DarkMoonRising talk contribs 15:04, July 14, 2012.

Hi, can you please do the following?
  1. Rather than writing a wall of text, give a short, succinct description (preferably without panic-inducing overtones)
  2. Attach a screenshot of what you're talking about (people see different things in different browsers)
  3. Say what internet browser you're using
  4. Link to a single page where you have a collapsible table/navframe.
  5. Link to your MediaWiki:Common.js page
Thanks. Especially on #1. I can't stress how important it is not to go into wall-of-text mode all the time :P — Mathmagician (message wall) 03:09, July 18, 2012 (UTC)
Try adding
.collapseButton {
  float: right;
Arkondi 06:20, July 18, 2012 (UTC)


Is it possible to make it show and hide by clicking on the "navhead" class because I accidentally hid the show/hide button here using this code? Also, I want the cursor to turn into a pointer when it hovers over there, like a link --Sam Wang (talk) 22:45, July 17, 2012 (UTC)

I second those requests. Why don't you guys work with the SpoilerAlert guy - see my TalkPage comments. His buttons are so much more professional and with the pointer cursor, but ShowHide is much more flexible and customisable. I'd love to see his buttons on this script. 2. Also it would be good to be able to pass parameters to customise the labels on each page. On one page I might want to have Show="Reveal" and on another Show="More", and ShowAll="Appear!" or some such, but currently the labels are fixed across the whole site. Ta.

Dollars_small.png DarkMoonRising talk contribs 01:52, July 18, 2012.

1. Check the closing brackets in
$(document).ready(function() {
    $('.project-year').function() {
        var ShowHideConfig = {
            brackets: '',
            en: {
                show: '↓',
                hide: '↑'
I don't know if this makes the button reappear again. Perhaps there is a conflict with one of the other scripts?
2. To get a pointer when hovering add
.collapseLink {
  cursor: pointer;
Arkondi 06:47, July 18, 2012 (UTC)
I've already fixed the closing and starting brackets, like the following:
$(document).ready(function() {
    $('.project-year').function() {
        var ShowHideConfig = {
            brackets: '',
            en: {
                show: '↓',
                hide: '↑'

However, it made no difference. Why does it do that? -- Sam Wang (talk) 12:25, July 18, 2012 (UTC)
I could reproduce the problem in 'my' wiki with the code in your Common.js. So the problem is located there.
Try the following: Comment out all javascript code except the import for ShowHide. The button should appear when you reload the page with Ctrl+F5. Then uncomment one import/block of code and reload the page with Ctrl+F5. Do this until the button disappear. Then you (hopefully) have found the import/block of code that causes the problem.
Arkondi 17:55, July 18, 2012 (UTC)
So you mean only this code:
var ShowHideConfig = {
    brackets: '',
        en: {
            show: '↓',
            hide: '↑'

Sam Wang (talk) 20:00, July 18, 2012 (UTC)
That's only the code for the local customization of ShowHide. You should start with only the following being active:
importScriptPage('ShowHide/code.js', 'dev');
Arkondi 02:58, July 19, 2012 (UTC)

(reset indent) Thanks, but I want to remove the brackets, change the show button to "↓", and change the hide button to "↑" -- Sam Wang (talk) 12:36, July 19, 2012 (UTC)

For this purpose the code seems correct (except for one needless closing bracket) and I don't think it causes the problem. But if the button is not visible ... Arkondi (talk) 15:14, July 19, 2012 (UTC)
Which code? -- Sam Wang (talk) 20:34, July 19, 2012 (UTC)
var ShowHideConfig = {
    brackets: '',
        en: {
            show: '↓',
            hide: '↑'
If you remove the third closing bracket it should work. Arkondi (talk) 02:55, July 20, 2012 (UTC)
Thanks, but can I insert pictures in there? -- Sam Wang (talk) 13:40, July 20, 2012 (UTC)
The basic CSS code for this:
table.collapsible span.collapseButton {
  color: transparent;
  background-image: url();
table.collapsible.collapsed span.collapseButton {
  color: transparent;
  background-image: url();
div.NavFrame.NavVisible span.NavToggle.collapseButton {
  color: transparent;
  background-image: url();
div.NavFrame span.NavToggle.collapseButton {
  color: transparent;
  background-image: url();
Instead of collapseButton you can use collapseLink. With the following code you should see, what's the difference:
span.collapseButton {
  background-color: red;
span.collapseLink {
  background-color: green;
Arkondi (talk) 16:36, July 20, 2012 (UTC)

(reset indent) I'm confused — for the hide button I want the image url of "Arrow-up.png", and for the show button I want the image url of "Arrow-down.png". For that, how is the CSS supposed to look like? -- Sam Wang (talk) 12:01, July 21, 2012 (UTC)

table.collapsible span.collapseButton {
  color: transparent;
  background-image: url('');
table.collapsible.collapsed span.collapseButton {
  color: transparent;
  background-image: url('');
div.NavFrame.NavVisible span.NavToggle.collapseButton {
  color: transparent;
  background-image: url('');
div.NavFrame span.NavToggle.collapseButton {
  color: transparent;
  background-image: url('');
Arkondi 12:13, July 21, 2012 (UTC)
Thanks, but why does it repeat it, and only displays half of it? I tried adding width: auto; height: auto; background: none-repeat scroll !important;, but it still remained the same -- Sam Wang (talk 13:44, July 22, 2012 (UTC)
Your usage of background is not correct, because it combines all background-... properties in one. Instead of background-image: url(); you should use:
  background: url() no-repeat contain;
For more options see Arkondi (talk) 14:00, July 22, 2012 (UTC)
The code:
table.collapsible span.collapseButton {
    color: transparent;
    background: url( no-repeat contain;
table.collapsible.collapsed span.collapseButton {
    color: transparent;
    background: url( no-repeat contain;
div.NavFrame.NavVisible span.NavToggle.collapseButton {
    color: transparent;
    background: url( no-repeat contain;
div.NavFrame span.NavToggle.collapseButton {
    color: transparent;
    background: url( no-repeat contain;

Hid the arrow! You can see it here -- Sam Wang (talk 22:51, July 22, 2012 (UTC)
You forgot the quotes around the URL of the image. Arkondi (talk) 06:34, July 23, 2012 (UTC)

(reset indent) I added quotes around it, but it still remained hidden -- Sam Wang (talk) 00:31, July 24, 2012 (UTC)

It seems that you can't use contain or cover in background. Try a fixed size or note background-size seperately. Arkondi (talk) 02:38, July 24, 2012 (UTC)
Sorry, but I do not quite understand what you are explaining. Can you do an example please? -- Sam Wang (talk) 01:00, July 25, 2012 (UTC)
Try to use the property background-size seperately
table.collapsible span.collapseButton {
    color: transparent;
    background: url('') no-repeat;
    background-size: contain;
or a fixed size in the shorthand property
table.collapsible span.collapseButton {
    color: transparent;
    background: url('') no-repeat 10px;
Arkondi (talk) 03:29, July 25, 2012 (UTC)
Thanks! I appreciate all of the time you've spent with helping me -- Sam Wang (talk) 20:17, July 25, 2012 (UTC)


Hello, I was wondering if it was possible to implement this button/system for comments on pages and blogs, so that you could Hide an entire comment thread (all the replies) to a single comment? Is this possible to be done and/or implemented? -MattShadow

Switch inside collapse

The ShowHide extension doesn't seem to work with the table navbox class when there is an switch code inside the collapse option. Anyone an idea how to fix this?Jens Ingels (talk) 12:29, July 27, 2012 (UTC)

Can you give example code or a link to a page where this problem occured? Arkondi (talk) 14:09, July 27, 2012 (UTC)
Here an example. I already test it with an space. That's not the problem. So I think it need an css or an js edit:
{| class="navbox collapsible {{#switch:{{PAGENAME}}|Miner|Knight|Dwarf|Faun|Golem|Centaur|Tree Sprite|Phoenix|Rogue|Unicorn|Fairy|Healer|Elf|Wizard=|#default=collapsed}}" style="width:100%; margin-top:1em; border:1px solid #999; font-size:90%; text-align:center;"
! style="background-color:#FF0000; color:#000000; padding:0.2em 0.5em;" nowrap="nowrap"|<div style="text-indent: 10%;">Heroes</div>
| style="padding:0.2em 0.5em;"| '''[[:Category:Melee heroes|Melee]]''': [[Miner]] · [[Knight]] · [[Dwarf]] · [[Golem]] · ([[Centaur]]) · ([[Tree Sprite]]) · [[Phoenix]]<br>'''[[:Category:Mid range heroes|Mid range]]''': [[Faun]] · ([[Rogue]]) · [[Unicorn]] · [[Fairy]] · [[Healer]] · [[Phoenix]]<br>'''[[:Category:Long range heroes|Long range]]''': [[Elf]] · [[Wizard]]
Jens Ingels (talk) 18:34, July 27, 2012 (UTC)
I couldn't reproduce the problem with your code in this wiki (see User:Arkondi/sandbox). For me it seems to work as intended: If the pagename is one of the options, then the table is not collapsed, otherwise it is. Perhaps navbox is causing the problem? It doesn't seem to be part of ShowHide und maybe the CSS/JS code for it interferes with ShowHide? A link to your wiki would be useful to check this. Arkondi (talk) 19:43, July 27, 2012 (UTC)
I also added on the wikia help but I don't really got an aswer yet. There I post all codes:
I don't think the wiki would give an lot info since I removed the full common to start over. I currently do this tests on userstyle js and css. On the link above you can find all codes but here this wiki: [1] [2]--Jens Ingels (talk) 21:17, July 27, 2012 (UTC)</div>
The opening <?php is not closed with ?>. I played around with the code in your wiki (User:Arkondi/wikia.js) and ShowHide stops working if the ?> is missing. Arkondi (talk) 06:21, July 28, 2012 (UTC)
Found the problem, it's is something with the "Extension:DynamicFunctions". I think the Toggler extension use some codes that are similar and so bug it. I found it out by removing the DynamicFunction. Any idea how to get the function supported with the other extension so there is no extension crash? Or can this not be fixed yet?--Jens Ingels (talk) 00:14, July 29, 2012 (UTC)
Did you tried to include ?>? Because the code for DynamicFunctions is still on my subpage (so I use it together with Toggler_extension) and for example the template Navbox neutral still works. Arkondi (talk) 06:52, July 29, 2012 (UTC)

Yes, but it didn't work than. Strangly now after adding all other codes to the common it worked. I probaly my cache wasn't fully refreshed. Thx for all help.--Jens Ingels (talk) 19:51, July 29, 2012 (UTC)

ShowHide merge with other extensions

I think the ShowHide should be merged with the CollapsibleInfobox and Dynamic navigation. Make it work on all tables.

I also think it need some functions like an collapsible+- class. An class that will display showhide with [+] and [-].

I think the showhide function should also get the ability to work like an toggle function. Merge it into an full option and the only script that is needed for collapse.

Finaly the script should need to work without css. However in order to have all functions they need to add the css part.

More info about the options with toggle here's an example: [3] --Jens Ingels (talk) 11:12, August 8, 2012 (UTC)

  1. For me, CollapsibleInfobox is only a special case of ShowHide. That's why a merge with it wouldn't be useful.
  2. The code for Dynamic navigation is written in javascript and seems to be outdated (as Grunny mentioned).
  3. Read ShowHide#Configuration to find out, how to get [+] and [-].
  4. What do you mean with 'options with toggle'? Your 'example' makes it not clear for me.
Arkondi (talk) 12:28, August 8, 2012 (UTC)
  1. Well it's maybe an special case but it's system to than nav frame option. Still think it need to build-in.
  2. I added an note on the page
  3. I known how to get + and - but it would be more usefull to ge it without an css class or js modification.
  4. Well the toggle function is an code similar to the navframe. The different with it is that you can add the switch link anywhere on the map making it possible to hide/show something on the bottom of the page with an link inside an infobox for example. Toggle makes also things possible like an 4 switch:See infobox dragonvale wiki: [4]. More info on the one piece wiki: [5].

Jens Ingels (talk) 12:56, August 8, 2012 (UTC)

Collapsable Tracklist

Is it possible to get a collapsable tracklist like this [6] on here? I'd like one as to avoid taking up too much space. 2manydjs (talk) 12:57, August 28, 2012 (UTC)

The tracklist on the linked page is a table nested inside a collapsible table. Nothing complicated. Arkondi (talk) 13:29, August 28, 2012 (UTC)
Tried to do that, but the hide/show bar was missing so it didn't affect the table at all. How does the creation of it go? Just put down a normal collapsible table and change the columns line to the tracklist box? 2manydjs (talk) 12:07, August 29, 2012 (UTC)
Does your wiki markup looked like this? The collapsible table must have at least one header cell.
wiki markup result
{| class="collapsible"
! tracklist
| column1 || column2 || ...
| 1 || 2 || ...
| ... || ... || ...
column1 column2 ...
1 2 ...
... ... ...
No. I tried to do that but either I did it wrong or it didn't work. The page I'm working on at the moment is [7] and what I'm trying to do is simply make the tracklist collapsible, preferably by default but I'm having no luck. Now I've gave you the actual thing, hopefully I could be pointed in the right direction. 2manydjs (talk) 13:42, August 29, 2012 (UTC)
Ask one of your administrators to include the script in your MediaWiki:Common.js or do it for your account only on your wikia.js supbpage (if you're using Monobook, then include it in your monobook.js supbpage). Arkondi (talk) 15:05, August 29, 2012 (UTC)


Is it just me or does pressing the Show/Hide button not do anything anymore? Not just on my home wiki but here on the Developers Wiki as well (Test some of the examples on the ShowHide#Collapsible_table page/section. They used to work, but seems to be broken now :/ ) — SW8573 (Message Wall) 14:06, September 19, 2012 (UTC)

Since MediaWiki 1.18 there's a builtin possibility to make elements collapsible. Arkondi (talk) 15:31, September 19, 2012 (UTC)
Does that mean that every use of showhide has to be reprogrammed?--{{SUBST:User:Gaarmyvet/autosig}} 21:06, September 19, 2012 (UTC)
I'm gettin' this same problem, but it's something that happened today. We've had 1.19 for a while now, and sho/hide still worked. — CzechOut 04:07, September 20, 2012 (UTC)

Problem is here:

function collapseTable( node, state ) {
		var	$table = $( node ),
			$button = $table.find( 'tr:first > th:last .collapseLink' );
		if ( !$table.length || !$button.length ) {
			return false;
		if ( typeof state === 'boolean' ) {
			$table.toggleClass( 'collapsed', !state );
		} else {
			$table.toggleClass( 'collapsed' );
		var hidden = $table.hasClass( 'collapsed' );
		// This line
		$table.find( '> * > tr:not(:first):not(.nocollapse)' )[hidden?"hide":"show"]();
		// ^ This line
		$button.text( msg( hidden ? "show" : "hide" ) );
		return true;

Wikia has upgraded jQuery to 1.8.1 which has "broken" it (Those chained not selectors are a bad idea anyway). jQuery does not like :not(:first), it gives empty results. It should be changed to:

		$table.find( '> * > tr' ).not(':first, .nocollapse')[hidden?"hide":"show"]();

(I'm not 100% confident that the combined not selector is perfect but it works in my testing). I'd fix it myself but I don't have the codeeditor group so I can't edit locked pages. Lunarity 05:29, September 20, 2012 (UTC)

It has now been fixed thanks to Lunarity. However, I'd suggest those of you using it try out MediaWiki's core collapsible JS that came with the upgrade to MediaWiki 1.19. See Help:Collapsing and Manual:Collapsible elements. If the default module works for you, you can remove the ShowHide import from your wiki and as such reduce the page weight a little bit :). Let me know if you run into any issues. Cheers, grunny@fandom:~$ 07:32, September 20, 2012 (UTC)
What do we do about the fact that the codes for "less than" and "greater than" echo to the screen both at Help:Collapsing and in my flashforward sandbox? This happens both in Chrome and IE9. I don't see any way that it's fixable at my level--{{SUBST:User:Gaarmyvet/autosig}} 13:40, September 20, 2012 (UTC)
Yeah, that's a known bug that will hopefully be fixed soon, but you can specify your own text for them using this: class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide". So, you can specify your own text, but we should have the missing messages issue fixed soon so you won't need it. Cheers, grunny@fandom:~$ 15:56, September 20, 2012 (UTC)
Thanks, Grunny!--{{SUBST:User:Gaarmyvet/autosig}} 16:17, September 20, 2012 (UTC)

Is this possible?

I'm wondering if this is possible:

Page content (inside content) Page content


Page content ([show]) Page content

instead of

Page content (
) Page content

SW8573 (Message Wall) 07:52, September 28, 2012 (UTC)

The following is realised without ShowHide. An additional CSS rule is required:
.inline-collapsible > span {
  float: none;
page content (<div class="mw-collapsible inline-collapsible" style="display: inline;"><div class="mw-collapsible-content" style="display: inline;">inside content</div></div>) page content
page content (
inside content
) page content
Arkondi (talk) 17:02, September 28, 2012 (UTC)
That's very nice Arkondi :D :D, but can the button be placed inside the brackets? I'm assuming that the CSS is placed on MediaWiki:Common.css. --— SW8573 (Message Wall) 11:27, October 2, 2012 (UTC)
With the css rule the button will be placed inside the brackets before the text. Depending on the configuration of the respective wiki, it may work if you place the rule in MediaWiki:Common.css. Arkondi (talk) 11:40, October 2, 2012 (UTC)

I've started this on a brand new wiki. I've added the respective css to the end of w:c:SW7951:MediaWiki:Common.css. The test page is w:c:SW7951:ShowHide. However, it turns out as

page content ([button]inside content) page content

If you like, you can edit there to help me fix it. I've given you admin rights there to fix the css if necessary :) — SW8573 (Message Wall) 12:06, October 2, 2012 (UTC)

Nevermind, I have a should have a way now. :) Thanks for the help. — SW8573 (Message Wall) 14:05, October 2, 2012 (UTC)

Traditional Chinese (zh-tw)

This is for Traditional Chinese (zh-tw):
Show: 顯示
Hide: 隱藏
Show All: 全部顯示
Hide All: 全部隱藏
Wong8888wikia (talk) 11:23, June 26, 2014 (UTC)

There is a default collapsible table that you could use:
{| class="mw-collapsible" data-expandtext="顯示" data-collapsetext="隱藏"
! title
| content
Which gives:
And further CSS can be used to customize it. ShowHide is still around because many wikis that have already had it installed still use it. If you haven't imported it to your wiki yet, it's a good idea to get the built-in feature.
Penguin-Pal (talk) 14:30, June 26, 2014 (UTC)

Get rid of brackets

Is it possible to have a show/hide thing without the brackets around the words show and hide? {{SUBST:User:SecretWielder/Sig}}00:07,10/13/2015 07:07, October 13, 2015 (UTC)

What classes does it target?

I want to make sure it is safe to remove it from a wiki, due to the "superseded" note. What HTML classes does it target?

I believe that, if I'm not wrong, it selects the collapsible class. Changing these to mw-collapsible collapsed will bring you up to the MW standard. --Original Authority (talk) 07:13, November 3, 2016 (UTC)
Community content is available under CC-BY-SA unless otherwise noted.

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+