Forum:Template hide codes

Forums → Ten Forward → Template hide codes (reply • watch)

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.^{•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:

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

.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:

<div class="appear">
.
.
.
</div>

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.^{•Talk to me} 20:30, December 10, 2009 (UTC)

So you know it only works on lists and not just any random div. — 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.^{•Talk to me} 20:40, December 10, 2009 (UTC)

[1] should help you. — 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.^{•Talk to me} 20:53, December 10, 2009 (UTC)