Forum:Template hide codes

I'm looking to enable the ability to use the click Show/Hide option with templates over at the Fanfic wiki. Unfortunately, I'm aware that it's a complicated process and I don't know how to do it. Can someone here help me out? -- Kevin W. &bull; Talk to me 04:37, December 10, 2009 (UTC)
 * You need several elements in place before you can use this function. First, you'll need to be an admin on the wiki, since a couple of protected files will need modified. Second, you'll need to edit MediaWiki:Common.css and add the following snippet of code:

/*********************************************************** .hiddenlist { display:none; } .visiblelist { display:block; }
 * Formatting for "hidden" Appearances section; by User:Bp

.listexpand { text-decoration: none; color: #66BBFF; } .listexpand:hover { text-decoration: underline; color: #66BBFF; }
 * Third, you'll need to edit MediaWiki:Common.js and add the following chunk of code:

//******************************************************************************** // Start "Hidden appearances section/interactive tree" script; by User:Bp //******************************************************************************** function toggleAppearancesPane(eid) { e = document.getElementById(eid); if (e) { e.className = (e.className == "hiddenlist") ? "visiblelist" : "hiddenlist"; } }

function showAppearancesPane(eid) { e = document.getElementById(eid); if (e) { e.className = "visiblelist"; } }

function hideAppearancesPane(eid) { e = document.getElementById(eid); if (e) { e.className = "hiddenlist"; } } // -

var tree = 0; var pane = 0; var paneListForThisTree = new Array; var descriptionString = new String("This list contains %d items."); //%d is where the number of items is inserted

var smallTreeCount = 8; // less leaves than this, the tree will be open at first var interactiveTrees = 1; // set this to 0 in user.js to turn this off

function button(text,onclick,cls) { var b = document.createElement('a'); b.innerHTML = text; b.href="javascript:"+onclick; b.className = cls; return b; }

function recursiveCountAndMark(e, depth, nocount) { var si = e.firstChild; var total = 0; while(si) { var tn = (si.tagName) ? si.tagName.toLowerCase : ''; if (tn == "li") { total++; } var subtotal = recursiveCountAndMark(si, depth+1, nocount); if (tn == "ul" || tn == "ol") { if (depth > 1) { si.id = "Pane" + pane++; paneListForThisTree.push(si.id); si.className = "hiddenlist";

si.parentNode.insertBefore(document.createTextNode('('), si);				si.parentNode.insertBefore(button( (nocount) ? "+/-" : subtotal, "toggleAppearancesPane(\""+si.id+"\")", "listexpand"), si);				si.parentNode.insertBefore(document.createTextNode(')'), si); total--; // don't count the li that this ul/ol is in			} else { // we are finished and this is the top ul/ol if (subtotal < smallTreeCount) { // this small enough they can be visible right away for (var i=0;i<paneListForThisTree.length;i++) { toggleAppearancesPane(paneListForThisTree[i]); }				}				var allonexec = '{'; var alloffexec = '{'; for (var i=0;i<paneListForThisTree.length;i++) { allonexec += "showAppearancesPane(\""+paneListForThisTree[i]+"\"); "; alloffexec += "hideAppearancesPane(\""+paneListForThisTree[i]+"\"); "; }				allonexec += '}'; alloffexec += '}';

var ds = (nocount) ? "" : descriptionString.replace(/\%d/g, subtotal); si.parentNode.insertBefore(document.createTextNode(ds + ' ('), si);				si.parentNode.insertBefore(button("show all", allonexec, "listexpand"), si);				si.parentNode.insertBefore(document.createTextNode(' • '), si);				si.parentNode.insertBefore(button("hide all", alloffexec, "listexpand"), si);				si.parentNode.insertBefore(document.createTextNode(')'), si); }		}		total += subtotal; si = si.nextSibling; }	return total; }
 * Finally, you'll need to add the following html code around any list you want to be made collapsible:

. ..
 * Many pages scattered throughout MA use this function; a little browsing should produce a few example to refer to. -- Renegade54 16:42, December 10, 2009 (UTC)
 * Ok, I've gone ahead and made the changes to the two pages, and I've made the edits to one template but as you can see, the template isn't collapsible. What am I doing wrong? -- Kevin W. &bull; Talk to me 20:30, December 10, 2009 (UTC)
 * So you know it only works on lists and not just any random div. &mdash; Morder (talk) 20:36, December 10, 2009 (UTC)
 * Ok, what do I have to do to make the template I linked, for example, collapsible? As you can see it's a fairly large template and I'd prefer it be collapsible. -- Kevin W. &bull; Talk to me 20:40, December 10, 2009 (UTC)
 * should help you. &mdash; Morder (talk) 20:43, December 10, 2009 (UTC)
 * I made the css and js changes, but I'm not understanding where to add the collapsible code to the template itself. Can you take a look and tell me what I need to do? -- Kevin W. &bull; Talk to me 20:53, December 10, 2009 (UTC)