Manual talk:Collapsible elements

From MediaWiki.org
Jump to: navigation, search

Doesn't work?[edit | edit source]

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[edit | edit source]

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:[edit | edit source]

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)[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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

What?[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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?


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[edit | edit source]

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"[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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)[edit | edit source]

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[edit | edit source]

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

.tablecollapse span.mw-collapsible-toggle{ float:right; }

.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.

Only Works for Anons[edit | edit source]

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.[edit | edit source]

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[edit | edit source]

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 bugzilla:35257. Helder 18:31, 6 July 2012 (UTC)

19.2 - Collapsible Elements Load Open[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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:

<div id="collapse-pre-one" class="mw-collapsible mw-collapsed">
 <div class="mw-collapsible-toggle toccolours" style="float: none;">
  <div class="mw-collapsible-toggle-row">
   <div class="mw-collapsible-toggle-header"><big>'''Example Header'''<br>Example sub</big></div>
   <div class="mw-collapsible-toggle-indicator">[[File:right-black-arrow.png|150px|link=]]</div>
  </div>
 </div>
<div class="mw-collapsible-content">
{{Lorem}}
</div>

CSS:

/* Collapse Toggle container */
#collapse-pre-one .mw-collapsible-toggle{
 display: table;
 border-collapse: collapse;
 width: 100%;
}
 
#collapse-pre-one .mw-collapsible-toggle-row{
 display: table-row;
}
 
/* Collapse Header should be on the left */
#collapse-pre-one .mw-collapsible-toggle .mw-collapsible-toggle-header{
 display: table-cell;
 vertical-align: middle;
 padding: 5px;
}
 
/* Collapse indicator image should be inline. align wherever you would like */
#collapse-pre-one .mw-collapsible-toggle .mw-collapsible-toggle-indicator{
 display: table-cell;
 vertical-align: middle;
 padding: 5px;
 text-align: right;
}
 
/* Collapse indicator image size should be something sane*/
#collapse-pre-one .mw-collapsible-toggle .mw-collapsible-toggle-indicator img{
height: 20px !important; 
width: 20px !important;
}
 
/* Collapse indicator image should rotate when toggled*/
#collapse-pre-one:not(.mw-collapsed) .mw-collapsible-toggle .mw-collapsible-toggle-indicator img{
 /* Safari */
 -webkit-transform: rotate(90deg);
 
 /* Firefox */
 -moz-transform: rotate(90deg);
 
 /* IE */
 -ms-transform: rotate(90deg);
 
 /* Opera */
 -o-transform: rotate(90deg);
 
 /* Internet Explorer */
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

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

on() causes problems for older jq versions[edit | edit source]

In the code for collpasible tables, on() is used to bind behavior to the <a> 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[edit | edit source]

Header
Collapsed content

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)