Manual talk:Collapsible elements

Expand/Collapse All?
Does this have any support for an "expand all" or "collapse all" button? Pretty desperate for the ability to use such myself.

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
 * 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:


 * ) 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. 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 :

Wikitext:

CSS:
 * A demo of this can be found at testwiki:User:Krinkle/CollapsingTestpageMw
 * Note that the  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? --★ → A  ir  on Ĉ  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

Customizing Collapse/Expand location
Using 1.18, how would I customize the mw-collapsible mw-collapsed CSS so that the 'Expand' or 'Collapse' buttons appear on the left?

I'm thinking of something like what the mobile site does for certain sections - rather than having the 'expand' button float out of site off to the right, i'd prefer it to be on the left. It doesn't necessarily need to use a button, but that would be interesting as well.

66.3.56.92 23:21, 1 March 2012 (UTC)

Update:

Solved it, more or less /* leave toggle on the right for tables */ .tablecollapse span.mw-collapsible-toggle{ float:right; } /* put it on the left for everything else */ .collapse span.mw-collapsible-toggle { float: left; }

By setting those classes, I can make sure that for tables, the toggle still appears where it should, and for other areas, the toggle appears floating left.

not sure how to swap out images, but at this point, thats no big deal. Hope this helps someone.

Another way: For those of you who don't like having the toggle right beside text, here's how to make text appear below it: .mw-collapsible-toggle { display:inline-block; float:none; }

Bluekuma (talk) 17:43, 22 May 2015 (UTC)


 * None of the above work anymore. I tested them. There is CSS that works though. I will start a new section farther down. --Timeshifter (talk) 23:44, 22 March 2019 (UTC)

Only Works for Anons
When i log into my wiki the expand/collapse links disappear and all content within them defaults to expanded. Any idea on how to fix this? I'm thinking it's not loading the java after login but don't know what to change to fix it.

Thanks!

Extensions that disrupts collapsible elements.
I notice that with mediwiki 1.17 I didn't have any collapsible elements, even doing all the things to be done. I upgrade to mediawiki 1.18, and didn't work.

So I notice that, when I disable the Page Object Model Extension It worked.

Check it.

1.19.1 Nested Collapsible elements
In 1.19.1, using the builtin JQuery mw-collapsible and mw-collapsed classes works as expected, except if you have nested elements and "Expand" a collapsed element, it will also expand all nested elements. Ideally this could either be toggled via a setting or by default not expand all child collapsible elements.
 * That seems to be 35257. Helder 18:31, 6 July 2012 (UTC)

19.2 - Collapsible Elements Load Open
I was previously using the now obsolete ToggleDisplay extension which worked nicely but now after upgrading to 1.19.2 I have started trying to use the built in Collapsible elements feature. It seems fine but when the page loads, all toggle areas load as open and only close once the page is completely loaded. This creates a kind of unwanted stutter in the visual loading of the page. Can this be fixed or is there a way to use Collapsible elements so it doesn't do this? The reason I mention the extension above is that it doesn't do this. The page loads with elements already closed and it looks great. Would love to have that effect again.

Loading issue
Is it possible to keep all the content collapsed while the rest of the page loads? I have a problem that, on pages with many images and other content, the information that I have initially collapsed is visible until the entire page loads in the browser.
 * It looks like this has been a proper nuisance for some time already. Cavila MW 1.19.2, MySQL 5.1.63, Php 5.3.3-7, SMW 1.8 22:47, 17 January 2013 (UTC)

Broken in Old Custom Skins
This functionality has been completely destroyed in pre 1.17 skins. It is impossible to implement any of the fixes suggested as the skins do not conform to the new framework, and the files used in the old framework no longer exist. Can anyone suggest a fix to re-implement this behaviour in pre 1.17 skins?

Custom Toggle with arrow indicator and header
This code makes a nice Toggle element with an Arror indicator image. The image can be anything really but an arrow is the most logical choice. I have not tested backwards compatibility on this for MediaWiki versions < V1.21. Credit goes to Krinkle as this was adapted from his examples. A demo can be seen here: | Toggle with Arrow Wikitext: Example Header Example sub

CSS: --Shift9999 at 2:06AM PST - 07-17-2013

on causes problems for older jq versions
In the code for collpasible tables, on is used to bind behavior to the &lt;a&gt; for the show/hide button.... This is a jq function introduced in 1.4.2, so if you're using an older jq version, instead use the (old) bind method instead of on.

Font color of collapsible button
Previously the font color of collapsible button was inheritable but now it doesn't. The problem is if someone changes the background color of talbe/div to blue, the [expand/collapse] button text is almost invisible even if the user has set color:#fff. -- Sameboat (talk) 02:44, 7 February 2014 (UTC)
 * Is there any news about this issue? --Rotpunkt (talk) 10:09, 23 May 2016 (UTC)

Wasn't this feature removed from the latest update? It is not in 1.24.1
I think this has been removed. How do I get it back for new updates? — Preceding unsigned comment added by 68.119.83.109 (talk • contribs) 21:45, Nov 5, 2015 (UTC)

Cannot make it work with Vector sidebar panels
I've tried to incorporate this on the sidebar panels under Vector to no avail. Applying the following... ...seems to place all the nuances class & id wise just fine but there is no collapsing or toggling of the H3 element at all (can't even force everything to collapsed state by default). When I duplicate a sidebar portal in a sandbox with the exact same structure, everything works as expected.

Is there any chance the mw-collapsible (jQuery) scheme is limited to only work within the .mw-body content container while the sidebar is outside that in it's own mw-navigation container?

Maybe it's a dependency thing?

Any help would be appreciated. Thanks in advance. -- George Orwell III (talk) 04:56, 12 December 2015 (UTC)

mw-customcollapsible
Why the mw-customcollapsible application is not documented? 93.57.251.180 13:46, 30 April 2016 (UTC)
 * Why don't you do it yourself?  --Tactica amiga (talk) 13:58, 30 April 2016 (UTC)
 * There is a line about it on ResourceLoader/Modules and on https://doc.wikimedia.org/mediawiki-core/master/js/#!/api/jQuery.plugin.makeCollapsible. Helder 02:20, 2 May 2016 (UTC)

Expand, collapse all?
I want a remote button that only expands and a button that only collapses, any ideas? mw-customtoggle seems to only toggle between them, which doesn't work that good when a couple of tables are already expanded and I want to expand all of them.

[Expand all] [Collapse all]

Collapsed table Some text in here. Other text here.

Expanded table Even more text here. No more text please.

Note that I think being able to click anywhere on the table to expand is important.

How to fix a collapsed spoiler?
I use spoilers type: Spoiler name Text At the same time, when the page loads - each time they are turned off, and it shows.

How to make so that it was unnoticed? Maybe there are other options spoilers?

One toggle
I would like to add, at the top of some pages, a toggle to hide some sentences of the page. So I have two questions.


 * 1) Is it possible to place the show/hide toggle at the top of the page?
 * 2) Can the toggle hide/show multiple texts?

Derugon (talk) 08:40, 30 April 2017 (UTC)

Toggle text of collapse/expand for customtoggle?
Hi,

I have to use customtoggle because the toggler is always outside the toggle content, and here I found no solution to alter the text of the customtoggle. Is there any official way to go? --Andreas P. 13:29, 9 August 2017 (UTC)

Selected collapsible table rows
Although it only shows it with  elements, the documentation makes it seem as if   could be used on any child of a   element, but this does not work for table rows. It should – bug report or feature request? — Christoph Päper 13:51, 16 November 2017 (UTC)

Click on a TOC item which lies within a currently hidden area, nothing will happen
If a person clicks on a TOC item which lies within a currently hidden area, nothing will happen.

It should toggle open the area, and jump to the anchor.

Seen with version 1.19.

Jidanni (talk) 12:14, 8 February 2018 (UTC)


 * This seems to be the case with every link into a collapsed section, not only from the TOC. --CompleCCity (talk) 09:38, 9 November 2019 (UTC)

not working collapse
I have this in a Template, in my old MW 1.25 working fine, after update to 1.30 not working. Ahy ideas?

[Anzeigen] [Verstecken] 


 * Try using the class names described in the documentation. You're probably using a custom script that's not working properly on recent versions of MediaWiki. --Ciencia Al Poder (talk) 09:17, 15 July 2018 (UTC)

Font size
I am a fairly novice coder in general so I apologize if there is a work around that I just don't know about due to simply being new to coding!

I am attempting to alter the font size within the collapsible section. The only code I could get to work was  which doesn't give us a lot of options. I couldn't find anything within the MediaWiki pages on how to further adjust size inside the Collapsible elements but I did try other options like adding style into the div and adding it around the divs. Needless to say, they haven't worked.

Any suggestions?


 * If by collapsible section you mean the text that's being collapsed/expanded, I don't see how it won't work. ¿Can you post here your example? --Ciencia Al Poder (talk) 09:17, 15 July 2018 (UTC)

Animations for collapse/expand
Collapsing / expanding an element should quickly animate, instead of snapping to the next state. This would make Wiki projects seem less 2002 and more modern.

mw-customtoggle- not working!
I'm using MW 1.30.0 with the Vector skin and an Arabic UI, and mw-customtoggle-X / mw-customcollapsible-X pair functionality is not working, neither for English text nor Arabic text. Instead, I get -- the localised equivalent of -- "[show/hide]" Has anyone experienced this?

--Ahmad Gharbeia أحمد غربية (talk) 14:48, 14 August 2018 (UTC)

Move toggle-link to the left, and adjust its margins.
This currently works on Wikia and Shoutwiki: /* === Collapsible elements. Toggle-link moved to left. === /* Margins around it adjusted. /* https://community.fandom.com/wiki/Thread:1104268 /* https://community.wikia.com/wiki/Thread:499656 /* https://community.wikia.com/wiki/Help:Collapsing /* https://cannabis.wikia.com/wiki/MediaWiki:Wikia.css */

.mw-collapsible .mw-collapsible-toggle { float:left; margin-left:0; margin-right:1em; }

To see the latest CSS, and any changes or additional collapsible customizations: --Timeshifter (talk) 00:31, 23 March 2019 (UTC)
 * http://cannabis.shoutwiki.com/wiki/MediaWiki:Common.css
 * https://cannabis.wikia.com/wiki/MediaWiki:Wikia.css

It isn't working in mobile view though on Shoutwiki
See: --Timeshifter (talk) 04:45, 2 January 2020 (UTC)
 * http://cannabis.shoutwiki.com/wiki/User:Timeshifter/Sandbox22

Partially expanding tables?
I have been searching for a way to only expand X rows of an episode table at a time. The table is simply episode #, title, short synopsis and I was hoping that I could make it collapsible such that a new link appeared at the bottom each time to reveal another say 5 rows of the table to avoid spoiling things for new fans. Short of making each individual row collapsible, or nesting collapsible tables inside each other, I've not managed to find a way to do this. Anyone know of a way to do this?


 * You might get more help from here: en:Help:Table and its talk page. --Timeshifter (talk) 08:35, 8 July 2019 (UTC)