Forum:Need a show/hide table

What is the simplest way to put this table into a show/hide box?:
 * http://cannabis.wikia.com/wiki/User:Timeshifter/Sandbox_12

I want the default to be a closed box with a caption line and a "show" link.

This table is in a template that is on around 600 pages. --Timeshifter 22:50, January 30, 2010 (UTC)
 * Read the documentation at w:c:dev:ShowHide. Add that import line mentioned into the wiki's MediaWiki:Common.js and then give the table a collapsible (and collapsed by default) class listed on the page. Be sure to assign a header to the table too, and all should be good. Joey (talk) 23:52, January 30, 2010 (UTC)


 * Thanks. I added this line:


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


 * Is that what I was supposed to do? What does it do? Does it pull up the code from this page?:
 * http://dev.wikia.com/wiki/ShowHide/code.js --Timeshifter 00:29, January 31, 2010 (UTC)
 * Yes. Joey (talk) 00:32, January 31, 2010 (UTC)

(unindent) OK. I copied the wikitext of
 * http://dev.wikia.com/wiki/ShowHide

and pasted it into here
 * http://cannabis.wikia.com/wiki/User:Timeshifter/Sandbox_13

The 2 pages do not look the same. Is there something missing still on my wiki? I am referring to the differences in this section: --Timeshifter 01:00, January 31, 2010 (UTC)
 * http://dev.wikia.com/wiki/ShowHide#Collapsible_table
 * http://cannabis.wikia.com/wiki/User:Timeshifter/Sandbox_13#Collapsible_table
 * Just some stuff from w:c:dev:MediaWiki:Common.css that you can use/modify, nothign important though imo. Joey (talk) 01:04, January 31, 2010 (UTC)


 * The class "wikitable" is not present by default on Wikia wikis.
 * That class give general styling to a table link on the dev wiki and you can put in the look you want to. — TulipVorlax 02:35, January 31, 2010 (UTC)
 * (I should refresh pages before i reply to them... — TulipVorlax 02:36, January 31, 2010 (UTC))

(unindent) What is producing the blue background at the top of the various tables in this section?:
 * http://dev.wikia.com/wiki/ShowHide#Collapsible_table

Is that part of all these classes?:
 * class="wikitable"
 * class="collapsible"
 * class="wikitable collapsible"
 * class="nocollapse"
 * class="toccolours collapsible"

Here is a table below using manual styling:

{| BGCOLOR="skyblue" style="border:1px solid red; padding: 4px;" |table|}

NavFrame method
http://dev.wikia.com/wiki/ShowHide#Collapsible_NavFrame_block

OK, here is the NavFrame method:

heading for simple table Table content.

heading for table with more content styling {| style="border:1px solid red; padding: 4px;"
 * Table content. An inner border and background color is not added by default to the table content. It looks like the default is for text to be centered. It also looks like the content is already padded, and does not need additional padding.

Here is the basic wikitext for the above collapsed tables:

heading Table content.

Custom header box
It looks like the blue heading box does not exist normally in a wiki with just the show/hide Javascript addtion. See here:
 * http://cannabis.wikia.com/wiki/User:Timeshifter/Sandbox_12

I can add a heading box manually in my wiki if I don't want to install other additions.

I don't see how to get the show/hide link into the header box, and on the right side of the heading text though.

Is there a way to do this without more additions to Javascript, CSS files, etc.? --Timeshifter 17:02, January 31, 2010 (UTC)


 * That's meant to be done with css. What's easies to do is use a dom inspector to look at css relevant to a node. ~ NOTASTAFF Daniel Friesen (DanTMan, Nadir Seen Fire) (talk) (tricks) (current topic) Jan 31, 2010 @ 22:15 (UTC)


 * I am afraid I don't know how to do that. Can you or others have a look?


 * I am studying these pages to learn more:
 * http://en.wikipedia.org/wiki/Wikipedia:NavFrame
 * http://en.wikipedia.org/wiki/DOM_Inspector
 * http://en.wikipedia.org/wiki/Document_Object_Model --Timeshifter 00:04, February 1, 2010 (UTC)


 * If you are using Firefox, just install the Firebug add-on.
 * If you are using IE, upgrade to IE 8 and use the dev tools. — TulipVorlax 05:02, February 1, 2010 (UTC)


 * I installed Firebug. It is very complex. I can't figure out what puts the show/hide link below the table header, and how to put the show/hide link to the right of the table header. --Timeshifter 19:21, February 1, 2010 (UTC)
 * Try DOM Inspector for Firefox, it's simpler than Firebug, and does the job well. --Zapwire (talk/blog/edits) 19:34, February 1, 2010 (UTC)

(unindent) I figured out what was putting the show/hide link below the table header, and fixed it. It wasn't a CSS or JS problem. It was an inline style formatting problem.

So the main problem is solved. I would like to figure out how to put the show/hide link to the right of the table header. Any ideas? See the latest results: --Timeshifter 19:54, February 1, 2010 (UTC)
 * http://cannabis.wikia.com/wiki/User:Timeshifter/Sandbox_12#Custom_header_box