Forum:How to do a retractable template

I have seen that Wikipedia and some wikis make use of retractable boxes with a show/hide button. I thought it would be useful to adopt to include non-canon information in the wikis. However the source of those templates is too complex and I still haven't figured out the commands and syntax that can make a simple retractable "box" or "frame" with text in it, viewable at will. Can you redirect me to some relevant resource? MoffRebusMy Talk 16:44, 28 August 2009 (UTC)
 * Could you give an example of a template on a Wiki(pedia) that uses this? Mark (Tedjuh10) - Talk 17:54, 28 August 2009 (UTC)
 * All the Wikipedia navboxes, such as http://en.wikipedia.org/wiki/Template:Leisure_Suit_Larry. There is a hide/show on the upper right. Unfortunately this template uses another template etc, and it's very hard to read and understand the "commands". Now, I don't want to make a navbox or infobox. I want to write some prose text in my wiki, viewable at will, without distracting the reader. MoffRebusMy Talk 18:07, 28 August 2009 (UTC)
 * You could use (change the #'s for colors):

If you want to use a template, you could use:

And then you could add a #switch for different colours. Mark (Tedjuh10) - Talk 18:33, 28 August 2009 (UTC)

Thanks!!!! MoffRebusMy Talk 18:44, 28 August 2009 (UTC)


 * No problem, however, sometimes some changes are required to make this work; if it isn't collapsible, please leave a message here. Mark (Tedjuh10) - Talk 18:48, 28 August 2009 (UTC)


 * Can you have a look here? http://dune.wikia.com/wiki/Template_talk:Nc. It's not collapsed and there is no option or "button" MoffRebusMy Talk 18:52, 28 August 2009 (UTC)


 * Mmm... I thought that would work. Try copying the following in your MediaWiki:Common.css:

/* --- NAVFRAME STUFF --- */ /* Standard Navigationsleisten, aka box hiding thingy from .de. */ /* Documentation at wikipedia:Wikipedia: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: #ccf; 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; }

and this to your Common.js // BEGIN Dynamic Navigation Bars (experimental) Script taken from Wikipedia. // Test if an element has a certain class // Description: Uses regular expressions and caching for better performance.

function setCookie(c_name,value,expiredays) { var exdate=new Date; exdate.setDate(exdate.getDate+expiredays); document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString); }

function getCookie(c_name) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1) { c_start=c_start + c_name.length+1; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length; return unescape(document.cookie.substring(c_start,c_end)); } } return ""; }

var hasClass = (function { var reCache = {}; return function (element, className) { return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp("(?:\\s|^)" + className + "(?:\\s|$)"))).test(element.className); }; }); var autoCollapse = 2; var collapseCaption = "hide"; var expandCaption = "show"; function collapseTable(tableIndex) { var Button = document.getElementById("collapseButton" + tableIndex); var Table = document.getElementById("collapsibleTable" + tableIndex); if (!Table || !Button) return false; var Rows = Table.rows; if (Button.firstChild.data == collapseCaption) { for (var i = 1; i < Rows.length; i++) Rows[i].style.display = "none"; setCookie("hideTable-" + wgArticleId + "-" + tableIndex,1,30); Button.firstChild.data = expandCaption; } else { for (var i = 1; i < Rows.length; i++) Rows[i].style.display = Rows[0].style.display; setCookie("hideTable-" + wgArticleId + "-" + tableIndex,0,30); Button.firstChild.data = collapseCaption; } } function createCollapseButtons { var tableIndex = 0; var NavigationBoxes = new Object; var Tables = document.getElementsByTagName("table"); for (var i = 0; i < Tables.length; i++) { if (hasClass(Tables[i], "collapsible")) { // only add button and increment count if there is a header row to work with var HeaderRow = Tables[i].getElementsByTagName("tr")[0]; if (!HeaderRow) continue; var Header = HeaderRow.getElementsByTagName("th")[0]; if (!Header) continue; NavigationBoxes[tableIndex] = Tables[i]; Tables[i].setAttribute("id", "collapsibleTable" + tableIndex); var Button = document.createElement("span"); var ButtonLink = document.createElement("a"); var ButtonText = document.createTextNode(collapseCaption); Button.style.styleFloat = "right"; Button.style.cssFloat = "right"; Button.style.fontWeight = "normal"; Button.style.textAlign = "right"; Button.style.width = "6em"; ButtonLink.style.color = Header.style.color; ButtonLink.setAttribute("id", "collapseButton" + tableIndex); ButtonLink.setAttribute("href", "javascript:collapseTable(" + tableIndex + ");"); ButtonLink.appendChild(ButtonText); Button.appendChild(document.createTextNode("[")); Button.appendChild(ButtonLink); Button.appendChild(document.createTextNode("]")); Header.insertBefore(Button, Header.childNodes[0]); tableIndex++; } } for (var i = 0; i < tableIndex; i++) { if (hasClass(NavigationBoxes[i], "collapsed") || (getCookie("hideTable-" + wgArticleId + "-" + i) == 1) || (tableIndex >= autoCollapse && hasClass( NavigationBoxes[i], "autocollapse"))) collapseTable(i); } }

addOnloadHook(createCollapseButtons);

// Dynamic Navigation Bars // Description: See NavFrame. var NavigationBarHide = '[' + collapseCaption + ']'; var NavigationBarShow = '[' + expandCaption + ']'; // shows and hides content and picture (if available) of navigation bars // Parameter: 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;

for (var NavChild = NavFrame.firstChild; NavChild != null; NavChild = NavChild.nextSibling) { if (hasClass(NavChild, 'NavPic')) NavChild.style.display = (NavToggle.firstChild.data == NavigationBarHide)?'none':'block'; if (hasClass(NavChild, 'NavContent')) NavChild.style.display = (NavToggle.firstChild.data == NavigationBarHide)?'none':'block'; } NavToggle.firstChild.data = (NavToggle.firstChild.data == NavigationBarHide)?NavigationBarShow:NavigationBarHide; } // adds show/hide-button to navigation bars function createNavigationBarToggleButton { var indexNavigationBar = 0; // iterate over all -elements var divs = document.getElementsByTagName("div"); for (var i=0; NavFrame = divs[i]; i++) { // if found a navigation bar if (hasClass(NavFrame, "NavFrame")) { indexNavigationBar++; var NavToggle = document.createElement("a"); NavToggle.className = 'NavToggle'; NavToggle.setAttribute('id', 'NavToggle' + indexNavigationBar); NavToggle.setAttribute('href', 'javascript:toggleNavigationBar(' + indexNavigationBar + ');'); var NavToggleText = document.createTextNode(NavigationBarHide); for (var NavChild = NavFrame.firstChild; NavChild != null; NavChild = NavChild.nextSibling) { if (hasClass(NavChild, 'NavPic') || hasClass(NavChild, 'NavContent')) { if (NavChild.style.display == 'none') { NavToggleText = document.createTextNode(NavigationBarShow); break; } } } 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 (hasClass(NavFrame.childNodes[j], "NavHead")) NavFrame.childNodes[j].appendChild(NavToggle); } NavFrame.setAttribute('id', 'NavFrame' + indexNavigationBar); } } } addOnloadHook( createNavigationBarToggleButton );

// tooltips if (getCookie("wiki-tiploader") != "no") document.write('');

// edit summaries // function fillEditSummaries { // var label = document.getElementById("wpSummaryLabel"); // if (label == null) return; // var comboString = "Standard summaries: "; // comboString += " "; // label.innerHTML = comboString + label.innerHTML; // requestComboFill('stdSummaries', 'Template:Stdsummaries'); // } // // function onStdSummaryChange { // var combo = document.getElementById("stdSummaries"); // var value = combo.options[combo.selectedIndex].value; // if (value != "") document.getElementById("wpSummary").value = value; // } // // addOnloadHook(fillEditSummaries);

// extract a URL parameter from the current URL // From wikipedia:User:Lupin/autoedit.js // paramName : the name of the parameter to extract

function getParamValue(paramName) { var cmdRe=RegExp( '[&?]' + paramName + '=([^&]*)' ); var h = document.location.href; var m=cmdRe.exec(h); if (m) { try { return decodeURIComponent(m[1]); } catch (someError) {} } return null; }

// &withJS= URL parameter // Allow to try custom scripts on the MediaWiki namespace without // editing Special:Mypage/myskin.js // from Wikipedia

{ var extraJS = getParamValue("withJS"); if (extraJS) if (extraJS.match("^MediaWiki:[^&<>=%]*\.js$")) importScript(extraJS); else alert(extraJS + " javascript not allowed to be loaded."); }

// patching in changes to table sorting and alt rows function changeTS { window['ts_alternate'] = function (table) { var tableBodies = table.getElementsByTagName("tbody"); for (var i = 0; i < tableBodies.length; i++) { var tableRows = tableBodies[i].getElementsByTagName("tr"); for (var j = 0; j < tableRows.length; j++) { var oldClasses = tableRows[j].className.split(" "); var newClassName = ""; for (var k = 0; k < oldClasses.length; k++) { if (oldClasses[k] != "" && oldClasses[k] != "alt") newClassName += oldClasses[k] + " "; } tableRows[j].className = newClassName + (j%2 == 0?"alt":""); } } } }

addOnloadHook(changeTS); Mark (Tedjuh10) - Talk 19:07, 28 August 2009 (UTC)


 * I dont know why but the end of this page is hard to read. — TulipVorlax 22:43, 28 August 2009 (UTC)
 * See this page capture. — TulipVorlax 22:50, 28 August 2009 (UTC)
 * Huh, what browser are you using? I'm using Firefox 3.5.2 and it views perfectly fine. Mark (Tedjuh10) - Talk 22:53, 28 August 2009 (UTC)
 * Checked it on Fx 3.5 and IE8 too, the overflow looks to be okay. Earlier browser, or Safari/Opera/Chrome? 01:37, 29 August 2009 (UTC)


 * It was doing the same with Firefox but only if logedin.
 * It was because of something in my personnal monaco that was there to fix a bad layout of the pre tag. I dont know why but on this page it missbehaved. — TulipVorlax 03:22, 29 August 2009 (UTC)


 * Sorry to pollute this thread but now this page look like this with IE8. A problem with the 2 first pre tags. No problem with Firefox. — TulipVorlax 03:30, 29 August 2009 (UTC)