Forum:Collapsible Table Help Please...

Hi Guys. I'm the founder of the Sabrina The Teenage Witch Wiki and I'm having trouble with a table. I've made a template for a episode list, so I can put it on every episode page, but I can't make it collapsible. I want it at the bottom of the page so that a bar is there, with a [show] button next to it, so when you press [show], it brings the full table in view, replacing the [show] with a [hide]. I'm sure you've seen stuff like this on tv show wikis, where the episode template is at the bottom of the page, so you get a idea of what I mean. It looks exactly how I want it to look, but I can't seem to make it collapse, no matter what I put in, Ive tried all the codes but none seem to work. Ill really appreciate anyone who can help me fix it. Click here to go the the page with the template. Please don't vandalise anything. Thanks alot to whoever can help, --Fawhad 03:13, 27 June 2009 (UTC)

-Edit- I just found a link to another similar template I kind of want mine to look like. I found this on the Futurama Wiki. I want mine to look like THIS, I tried copying the 'class="toccolours collapsible collapsed"', but still, nothing.


 * Hi Fawhad, you just need to add the collapisble JS to your MeddiaWiki:Common.js. Funny, I also made that Futurama template :P
 * Okay, add the following to w:c:sabrina:MediaWiki:Common.js

/* Any JavaScript here will be loaded for all users on every page load. */

/* Test if an element has a certain class ************************************** * * Description: Uses regular expressions and caching for better performance. * Maintainers: User:Mike Dillon, User:R. Koot, User:SG */ var hasClass = (function {    var reCache = {};    return function (element, className) {        return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp("(?:\\s|^)" + className + "(?:\\s|$)"))).test(element.className);   }; });

/** Collapsible tables ********************************************************* * * Description: Allows tables to be collapsed, showing only the header. See *              NavFrame. * Maintainers: User:R. Koot */ 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"; }       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" ) ) { /* 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" ) || ( tableIndex >= autoCollapse && hasClass( NavigationBoxes[i], "autocollapse" ) ) ) { collapseTable( i ); }   } } addOnloadHook( createCollapseButtons );
 * ~Joey~ ^Talk^  03:34, 27 June 2009 (UTC)

Thanks heaps. It's all good and working now. :) --Fawhad 03:48, 27 June 2009 (UTC)