Manual talk:Collapsible elements

Doesn't work?

This didn't work correctly in my Mediawiki 1.12.0 install. Looking at the source code of the page it created, initially hidden content is indeed hidden, but there is no "Show" link to reveal the content. Do you have any ideas? --Gadlen 19:13, 5 June 2008 (UTC)

I'm not seeing the "hide" or "show" links

I'm running 1.13.4. any thoughts, could it be firefox? --69.244.124.138 01:16, 17 March 2009 (UTC)

still doesn't work any thoughts this what is is displayed:

Edited both common.js and common.css This is the header cell, which is always shown This cell is not shown by default.

(no hide or show links)

--69.244.124.138 04:42, 25 March 2009 (UTC)

Is this code for 13.3 +  ?

--Mappc 00:00, 5 April 2009 (UTC)

I'm still interested in getting some resolution....any thoughts

--Mappc 22:54, 6 April 2009 (UTC)

This does work for me (IE6 , Firefox 3 and MediaWiki 13.4)

I had to change the function below the rest stay as it is. --AndreasMueller 21:56, 26 May 2009 (UTC)

function createCollapseButtons()
{
    var tableIndex = 0;
    var NavigationBoxes = new Object();
    var Tables = getElementsByClassName(document, "table", "collapsible");
 
    for ( var i = 0; i < Tables.length; i++ ) {
            /* 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", "javascript:collapseTable(" + tableIndex + ");" );
            ButtonLink.appendChild( ButtonText );
 
            Button.appendChild( document.createTextNode( "[" ) );
            Button.appendChild( ButtonLink );
            Button.appendChild( document.createTextNode( "]" ) );
 
            Header.insertBefore( Button, Header.childNodes[0] );
            tableIndex++;
    }
 
    var Tables = getElementsByClassName(document, "table", "collapsed");
    for ( var i = 0;  i < Tables.length; i++ ) {
        collapseTable( i );
    }
 
    var Tables = getElementsByClassName(document, "table", "autocollapse");
    for ( var i = 0;  i < Tables.length; i++ ) {
        if ( i >= autoCollapse ) {
            collapseTable( i );
        } 
    }   
}

Worked A-OK

No editing needed over here. Using MediaWiki 1.15.1 with no other custom JS. 74.65.88.219 01:55, 7 October 2009 (UTC)

Worked for me too on 1.15.1. At first it was very frustrating, I couldn't get it to work, but all I needed to do was the Shift-Refresh thing in my browser. =D --J.nesta 18:36, 5 November 2009 (UTC)

hide/show placement not working

I updgraded to 1.15.1. Now my hide/show buttons are always on the left even though I have the Common.css file with float right. See at http://sunshinereview.org/index.php/User:Ljarratt

1.16 functionality

Beta 3. This function works flawlessly for me.

Funny, not doing a damn thing for me (as describe, prior to 1.7 in the main article)

MediaWiki 1.16.2

PHP 5.2.11 (apache2handler)

MySQL 5.0.77

--99.197.224.57 06:04, 26 March 2011 (UTC)

1.15.3 Not Working - Using skin Cavendish

can anyone help with making this functional? http://emajenanything.com/mainwiki/wiki/index.php?title=Test THANKS

What?

How come I don't have neither common.js nor common.css in my wiki? how do I make this effect? :( --201.255.119.39 07:22, 19 July 2010 (UTC)

You can create them using your search box and searching for

MediaWiki:Common.css
MediaWiki:Common.js

--Skew 03:14, 22 September 2010 (UTC)

show/hide: jumping to top

A click on my show/hide button causes the page to jump to the top. Any ideas? Gohnarch 20:30, 27 September 2010 (UTC)

I have same problem on two different installs of 1.15 (Ubuntu and CentOS) - tried code from "This does work for me ..." above and that seems to be OK for now ... WBN 82.41.58.191 23:49, 13 October 2010 (UTC)

That's as a result of these two lines

ButtonLink.setAttribute( 'href', '#' );
addHandler( ButtonLink, 'click', new Function( 'evt', 'collapseTable(' + tableIndex + ' ); return killEvt( evt );' ) );

If you look at the current mw MediaWiki:Common.js, it reads

ButtonLink.setAttribute( 'href', "javascript:collapseTable(" + tableIndex + ");" );

(see W:Fragment identifier). I will update the page to show this change if that is all right with everybody. --JCrue 18:24, 30 November 2010 (UTC)

Still not working

Hi, I'm trying to install this on 1.15, and the "hide/show" tags aren't appearing. I've edited the common.js and common.css, as above and as shown on the article page, purged webcaches, etc, etc, and still no go. Any ideas for how to troubleshoot this? - very frustrating!

1.17 example not working on diffs

Hi!

I noticed that the new examples doesn't works when the page is seen in a diff like this. I think it should work even in this case (not only when viewing the page directly). Helder 16:03, 23 February 2011 (UTC)

During development it worked fine in preview, diff and oldid view. Will look into it. Krinkle 11:00, 24 February 2011 (UTC)

It does work in the latest development version, as for example ran on TranslateWiki, here. Hm.. Krinkle 11:32, 24 February 2011 (UTC)

Seems the cause isn't in the script after all. The problem is the FlaggedRevisions-extension which loads the page-contents afterwards via JavaScript causing any onload handlers to fail miserably since there isn't a page at that time (TOC-toggle, mw-collapsible, mw.util.$content) See also bugzilla: 26175 and bugzilla: 27513. I can't fix this untill FlaggedRevs has some kind of hook or is fixed otherwise. Any javascript handlers will fail (potentially $.fn.placeholder and $.fn.checkboxShiftClick as well) Krinkle

Cannot get Collapse to work in 1.17

I have tried to different 1.17 installs and I cannot get collapse to work at all. I am following the examples exactly:

<div class="toccolours mw-collapsible" style="width:400px">

This is text is collapsible. {{Lorem}}

</div>

Just shows the text. There is no option to collapse. The other examples give the same results. The ability to collapse is completely missing, even though the directions say "After 1.17... Basically all you do is add the class "mw-collapsible" to an element." What am I missing?

• Site #1: http://wiki.cyanogenmod.com/wiki/User:Pconwell/sandbox2
• Site #2: http://w.gu1dry.com/User:Pconwell/Sandbox2

I can't get this to work over at http://everquest.wikkii.net either. I also couldn't get the old style of collapsible tables using common.css and common.js to work either. I'm going nuts trying to figure out what I have done wrong. 24.40.138.185 21:52, 24 June 2011 (UTC)

On ResourceLoader/Default_modules#jQuery.makeCollapsible it is said that this feature is currently available on trunk, since rev:78914, but there is no mention of MW 1.17. So, I think this page is outdated.

Anyway, on this page it is explained how to install the plugin on MW 1.17 (as was made here on MediaWiki.org). Helder 12:43, 28 June 2011 (UTC)

Thank you for your concern. I had created MediaWiki:JQuery-makeCollapsible.js and MediaWiki:JQuery-makeCollapsible.css on my wiki and put the two lines in my Common.js before posting here. But it just doesn't seem to work. Neither does the old style collapsible tables. I'm at a loss here to understand why. 24.40.138.185 07:29, 29 June 2011 (UTC)

Notice that the current code of your MediaWiki:Common.js has syntax errors before the makeCollapsible plugin is loaded (copy and paste it on JSHint to check the syntax). Specifically, this will not work:

if ( {{PAGENAME}} == 'Main Page' )

So, I think the plugin will work if you add these lines again and fix the syntax errors above (or just remove everything from your MediaWiki:Common.js except this:

/* FROM MEDIAWIKI.ORG COMMON.JS  Load collapsible javascript */
mw.loader.load( 'http://www.everquest.wikkii.net/w/index.php?title=MediaWiki:JQuery-makeCollapsible.js&action=raw&ctype=text/javascript' );

) and clear your cache. Helder 13:18, 29 June 2011 (UTC)

Helder, thank you a million times. That was the problem all right. Thanks. 24.40.138.185 06:22, 30 June 2011 (UTC)

Indication of collapsed/expandable status

Moved from Meta-Wiki

Hi,

This might be the wrong place to ask, but we were wondering if their is an easy way to know which status of the class="mw-customtoggle-myDivision" is set in terms of being collapsed/expandable.

Using the standard solution indicates the status through the display of either [Collapsed] or [Expand], in our case we trigger the area which need to be collapsed with the display of an icon, and as soon the user switches from one status to the other one we wanted to indicated a change through a change in the icon displayed.

<div class="mw-customtoggle-topicon" style="cursor:pointer">[[File:icon-set-10-arrow-down.png|14px|link=]]</div>

So in case the class contains "mw-collapsible mw-collapsed" display one type of icon, and in case of the class just being "mw-collapsible" display another icon. --MWJames 18:13, 6 July 2011 (UTC)

Hi MWJames,

If you can provide a link to where this happends on a live-wiki I may be able to give a more fine-tuned detail. I'll show you how I would do it though. I'm assuming your toggle-icon is inside <div class="mw-collasible">...</div>:

Wikitext:

<div id="collapse-pre-one" class="mw-collapsible">
 <div class="mw-collapsible-toggle toccolours" style="width: 100%">
  <span class="down">[[File:Arrow-down-dash-2.0.svg|50px|center|link=]]</span>
  <span class="up">[[File:Arrow-up-dash-2.0.svg|50px|center|link=]]</span>
 </div>
 <div class="mw-collapsible-content">
  {{User:Krinkle/Lorem}}
 </div>
</div>

CSS:

#collapse-pre-one  .mw-collapsible-toggle .up,
#collapse-pre-one.mw-collapsed .mw-collapsible-toggle .down {
 display: none;
}
#collapse-pre-one .mw-collapsible-toggle .down,
#collapse-pre-one.mw-collapsed  .mw-collapsible-toggle .up {
 display: block;
}

A demo of this can be found at testwiki:User:Krinkle/CollapsingTestpageMw#collapse-pre-one

Note that the collapse-pre-one is not required, it's just to make sure it won't apply to other collapsible constructions on the same page. Use whatever identifier you like Krinkle 21:14, 6 July 2011 (UTC)

makeCollapsible "in core"

Does "in core as of MediaWiki 1.18 or higher" mean that it will be enabled by default on all wikis, loaded and activated on every page? If so, will there be any way to disable it? --Yair rand 08:54, 14 July 2011 (UTC)

There is nothing to disable as all the scripts mentioned on this page are only triggered if there are elements on the page marked as "mw-collapsible". If your wiki doesn't want or have collapsible elements, this script will not be triggered and nothing will change when upgrading to 1.18. Krinkle 04:21, 4 August 2011 (UTC)

Really? It won't even load the scripts or take up time running any JS if there aren't any mw-collapsible elements in the wikitext? --Yair rand 05:14, 4 August 2011 (UTC)

Use new 1.18 collapsible in 1.17

You can use the new 1.18 collapsible code in a 1.17 install. Just paste the contents of jquery-makeCollapsible.js into your MediaWiki:Common.js

Download head version from MediaWiki

Then at the bottom of MediaWiki:Common.js, add:

mw.messages.set({"collapsible-collapse":"Collapse","collapsible-expand":"Expand"});
$(document).ready(function(){
 $('.mw-collapsible').makeCollapsible();
});

And add the contents of jquery.makeCollapsible.css into your MediaWiki:Common.css

Download head version from MediaWiki

If there is a tidier way of doing this, please let me know. --Thenickdude 11:33, 13 September 2011 (UTC)

Autocollapse

Has a version of autocollapse been implemented in core in 1.18? --★ → Airon Ĉ 14:09, 7 October 2011 (UTC)

Common.js script (Before 1.18) don't works

Hey there!

I have some Wikis running on an Debian Linux 6.0 (Squeeze) Webserver.
MediaWiki 1.17.0 (Version 95135)
PHP 5.3.3-7+squeeze3 (apache2handler)
MySQL 5.1.49-3

and i have the Problem, that this Collapse Hide & Show didnt works. I try it on two local Servers installed in Virtual Box and i have there the same problem. Could it be, that Debian Squeeze is the problem? Ive tryd all things, that i found here. But without a happy ending... Yukii 12:27, 10 October 2011 (UTC)

mw-collapsible will not work (1.18)

I've copied and pasted the examples and none of them work no matter what I do - upgraded my wiki, completely reinstalled the wiki, no dice. Leangle 8:54 PM, Dec 29 2011