Forum:Hiding things

There are some cool "buttons" in some templates which you can hide or show the template with. And the template I made is too big so I think those cool "buttons" may be useful. I tried to copy some "buttons" to here but it seems doesnt work. Please help me figure it out or "set up" it in here : )--Kato 02:06, 21 April 2007 (UTC)
 * You mean this? --Cizagna (Talk) 03:11, 21 April 2007 (UTC)

Yes,it is,thanks a lot^^.

So all I have to do is paste these three parts into common.js?--Kato 09:14, 21 April 2007 (UTC)

 /* Standard Navigationsleisten, aka box hiding thingy from .de.*/ div.Boxmerge, div.NavFrame { margin: 0px; padding: 2px; border: 1px solid #aaaaaa; 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: #ffffff; margin: 0px; padding: 2px; float: left; } div.NavFrame div.NavHead { height: 1.6em; font-weight: bold; font-size: 100%; background-color: #efefef; 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; }
 * 1.from Forum:Show_and_hide_thingy

 /** Collapsible tables ********************************************************* * * Description: Allows tables to be collapsed, showing only the header. See *              Wikipedia:NavFrame. * Maintainers: User:R. Koot */
 * 2. from Wikipedia:MediaWiki:Common.js

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.getElementsByTagName( "tr" );

if ( Button.firstChild.data == collapseCaption ) { for ( var i = 1; i < Rows.length; i++ ) { Rows[i].style.display = "none"; }       Button.firstChild.data = expandCaption; } else { for ( var i = 1; i < Rows.length; i++ ) { Rows[i].style.display = Rows[0].style.display; }       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" ) ) { 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.setAttribute( "id", "collapseButton" + tableIndex ); ButtonLink.setAttribute( "href", "javascript:collapseTable(" + tableIndex + ");" ); ButtonLink.appendChild( ButtonText );

Button.appendChild( document.createTextNode( "[" ) ); Button.appendChild( ButtonLink ); Button.appendChild( document.createTextNode( "]" ) );

var Header = Tables[i].getElementsByTagName( "tr" )[0].getElementsByTagName( "th" )[0]; /* only add button and increment count if there is a header row to work with */ if (Header) { Header.insertBefore( Button, Header.childNodes[0] ); tableIndex++; }       }    }

for ( var i = 0; i < tableIndex; i++ ) { if ( hasClass( NavigationBoxes[i], "collapsed" ) || ( tableIndex >= autoCollapse && hasClass( NavigationBoxes[i], "autocollapse" ) ) ) { collapseTable( i ); }   } }

addOnloadHook( createCollapseButtons );

 function addLoadEvent(func) {  if (window.addEventListener) window.addEventListener("load", func, false); else if (window.attachEvent) window.attachEvent("onload", func); }
 * 3.from Forum:Show_and_hide_thingy

// ============================================================ // BEGIN Dynamic Navigation Bars (experimantal) // set up the words in your language var NavigationBarHide = '[ Hide ]'; var NavigationBarShow = '[ Show ]'; // set up max count of Navigation Bars on page, // if there are more, all will be hidden // NavigationBarShowDefault = 0; // all bars will be hidden // NavigationBarShowDefault = 1; // on pages with more than 1 bar all bars will be hidden var NavigationBarShowDefault = 1; // shows and hides content and picture (if available) of navigation bars // Parameters: //    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; }   // if shown now if (NavToggle.firstChild.data == NavigationBarHide) { for (               var NavChild = NavFrame.firstChild;                NavChild != null;                NavChild = NavChild.nextSibling            ) { if (NavChild.className == 'NavPic') { NavChild.style.display = 'none'; }           if (NavChild.className == 'NavContent') { NavChild.style.display = 'none'; }       }    NavToggle.firstChild.data = NavigationBarShow; // if hidden now } else if (NavToggle.firstChild.data == NavigationBarShow) { for (               var NavChild = NavFrame.firstChild;                NavChild != null;                NavChild = NavChild.nextSibling            ) { if (NavChild.className == 'NavPic') { NavChild.style.display = 'block'; }           if (NavChild.className == 'NavContent') { NavChild.style.display = 'block'; }       }    NavToggle.firstChild.data = NavigationBarHide; } } // adds show/hide-button to navigation bars function createNavigationBarToggleButton {   var indexNavigationBar = 0; // iterate over all -elements for(           var i=0;             NavFrame = document.getElementsByTagName("div")[i];             i++        ) { // if found a navigation bar if (NavFrame.className == "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); 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 (NavFrame.childNodes[j].className == "NavHead") { NavFrame.childNodes[j].appendChild(NavToggle); }           }            NavFrame.setAttribute('id', 'NavFrame' + indexNavigationBar); }   }    // if more Navigation Bars found than Default: hide all if (NavigationBarShowDefault < indexNavigationBar) { for(               var i=1;                 i<=indexNavigationBar;                 i++        ) { toggleNavigationBar(i); }   } } addLoadEvent(createNavigationBarToggleButton); // END Dynamic Navigation Bars // ============================================================ --Kato 09:14, 21 April 2007 (UTC)