Help:Tables/collapsible


 * by Joeyaa, Wikia user; web developer


 * This guide is a walkthrough of how to set up collapsible tables or sections on your wiki

Wikia users often see Wikipedia's collapsible templates and want to take that style to their wiki, but they don't know how. In reality, it's one of the simplest things to do if you know how.

Collapsible tables or sections or boxes or whatnot can be a great way to hide big things from the flow of a page, especially if they aren't needed to be viewed immediately by readers. They make the page a little dynamic and shiny as they slide out and back in on the fly. They have their uses for sure and many wikis have made them a part of their home.

Here's a simple and quick walkthrough of how to add collapsibility to some of your tables/sections/etc, pain free:

 First off, add importScriptPage('ShowHide/code.js', 'dev'); to your wiki's MediaWiki:Common.js and save it. It doesn't matter where on the page particularly, by habit I usually add it to the bottom. Clear your cache (information on how is on that same page and can be found here too.) Essentially, you just enabled it for your wiki. However, I suggest you continue to read this page. There is some common styling done to tables that are made collapsible on Wikia and on many wikis across Wikia. If you'd like to maintain this style and ensure yours will look similar to Wikipedia's, add this to your wiki's MediaWiki:Common.css: (be aware the box scrolls)  /* default skin for navigation boxes */ table.navbox { background-color: #f9f9f9; border: 1px solid #aaa; clear: both; font-size: 90%; margin: 1em 0em 0em; padding: 2px; text-align: center; width: 100%; }

table.navbox th { background-color: #ccf; padding-left: 1em; padding-right: 1em; }

table.navbox tr:not(:first-child) th { background-color: #ddf; }

@media print { .navbox { display: none; } }

/* Standard Navigationsleisten, aka box hiding thingy from .de. Documentation at NavFrame. */

div.Boxmerge, div.NavFrame { margin: 0px; padding: 4px; border: 1px solid #aaa; text-align: center; border-collapse: collapse; font-size: 95%; } div.Boxmerge div.NavFrame { border-style: none; border-style: hidden; } div.NavFrame + div.NavFrame { border-top-style: none; border-top-style: hidden; } div.NavPic { background-color: #fff; margin: 0px; padding: 2px; float: left; } div.NavFrame div.NavHead { height: 1.6em; font-weight: bold; background-color: #ccccff; position:relative; } div.NavFrame p { font-size: 100%; } div.NavFrame div.NavContent { font-size: 100%; } div.NavFrame div.NavContent p { font-size: 100%; } div.NavEnd { margin: 0px; padding: 0px; line-height: 1px; clear: both; } a.NavToggle { position:absolute; top:0px; right:3px; font-weight:normal; font-size:smaller; }  The tables you want to make collapsible (see here for section collapsibility syntax instead) need to meet certain requirements before they will become collapsible:  Your wiki needs the collapsible javascript (should already be done if you did step 1.) The table needs to define a header. Pretty simple, all you need to do is define the text that will show when it's collapsed. Just fit ! blah</tt> somewhere after the opening {|</tt></li> The table needs to be calling on a collapsible class to tell it to collapse or be collapsible. There are lots of examples here, and I think the simplest ones are class="collapsible collapsed"</tt> or class="collapsible"</tt> depending what you want. Your choice.</li> </ul> </ol>

That's about all I can say. The original documentation for this collapsible stuff is here for further reading. The wikitext for a simple example of a template you can make with this is below. It was made by someone who had just added the ShowHide code (real name for what this is) to their wiki. The Community Central forums are a great place to ask for further help on this or for trouble shooting.

<pre style="height:150px;overflow:auto;">{| align="center" class="collapsible collapsed" style="margin:0 auto; font-size: smaller; text-align: center; width: 100%" ! style="background: Tan; height: 8pt" | 
 * example:



! style="background: Tan; height: 8pt" |  
 * }

One warning I'll give people is to be aware that collapsibility doesn't mean non-existence. Just because you may not see a link in a collapsed template doesn't mean it isn't there, you just don't see it. be aware though, because search engines will see it. They don't load JS like that and will spot the link and visit it. This may not seem like a problem, but Google suggests no more than 100 links on a page, so mass adding say a collapsed template with multiple links may not be a great idea SEO-wise. Remember this.

Troubleshooting

 * I did step one but it's not working.
 * First off clear your cache, see Help:Bypass your cache for instructions on how to. Then, make sure what you're looking at is supposed to collapse (does it have a header and call a collapsible class if it's a table? does it have all the divs and classes for a collapsible section?). At this point if you're not sure why it's not working, try asking at the Community Central Forums.


 * The tables look weird and not like Wikipedia's.
 * See section 2 and copy that CSS. It also may be because of your template itself, just the formatting of it.


 * Can I even further customize the ShowHide stuff?
 * Yes. See here for more information.


 * Is ShowHide in my language?
 * It probably is. It is translated into many languages and it shows different messages depending what language you have set in your preferences if it's different than the wiki's. It's very smart, see here for more information on this.