Forum:O hello thar

<<< Back to Logical Sector • <<< Back to Forum

Can we have collapsable tables?

The code, if you will:

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.className = "collapseButton";  //Styles are declared in Common.css
 
            ButtonLink.style.color = Header.style.color;
            ButtonLink.setAttribute( "id", "collapseButton" + tableIndex );
            ButtonLink.setAttribute( "href", "#" );
            addHandler( ButtonLink,  "click", new Function( "evt", "collapseTable(" + tableIndex + " ); return killEvt( evt );") );
            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 );
        } 
        else if ( hasClass( NavigationBoxes[i], "innercollapse" ) ) {
            var element = NavigationBoxes[i];
            while (element = element.parentNode) {
                if ( hasClass( element, "outercollapse" ) ) {
                    collapseTable ( i );
                    break;
                }
            }
        }
    }
}
 
addOnloadHook( createCollapseButtons );

Does the Pope crap in the woods? Also, does it work? -- Hindleyak  Converse • ?blog • Click here! 18:21, 7 Jumbly 2010 (UTC)

Should, I took it straight from the MediaWiki site, though you might want to clear out the old Moon code from common.js, to get rid of that nasty parse error. --(ƒî)» 20:10, 7 Jumbly 2010 (UTC)

P.S: Could you throw this snippet into common.js aswell? It does basically the same thing but is more flexible, allows you to use images as buttons and whatnot:

function doToggle(){
    for (var i= document.body.getElementsByTagName('a').length; i-->0;) {
        var link= document.body.getElementsByTagName('a')[i];
        if (link.title=='showhide') {
            var div= document.getElementById(link.hash.substring(1));
            Toggler(link, div, true);
        } else if (link.title=='hideshow') {
            var div= document.getElementById(link.hash.substring(1));
            div.style.display = 'none';
            Toggler(link, div, true);
        }
    }
}
window.onload= doToggle;

    function Toggler(toggler, togglee, state) {
        toggler.onclick= function() {
            state= !state;
            togglee.style.display= state? 'inline' : 'none';
            return false;
        }
    }

--(ƒî)» 22:05, 7 Jumbly 2010 (UTC) bump?--(ƒî)» 05:00, 15 Jumbly 2010 (UTC)

Added the code, but isn't the moon thingy not still used for the template on category:Trash? I dunno, haven't been around for a while. -- Hindleyak  Converse • ?blog • Click here! 11:26, 18 Jumbly 2010 (UTC)

Thanks for adding it. IIRC, the moon code is broken, I'd replaced it before realizing it wasn't used anymore.

Also, I've prepared a demonstration of the fruits of your labor. Check it. --(ƒî)» 04:49, 20 Jumbly 2010 (UTC)

It doth not work, your javascript skills shall be put to shame, in an arena deathmatch, where corndogs will be served.--Silent PenguinLeave Me Alone 15:43, 20 Jumbly 2010 (UTC)

Yes it doth work, for us at least. —rms talk 16:28, 20 Jumbly 2010 (UTC)