Help talk:Collapsing

Collapsing long tables
I'm working with several long tables in one page and trying to allow a user to "tidy up" the page/table in one click, after scrolling to the bottom of the table. This works nicely when all the tables are loaded collapsed and the preview of the source doesn't include the comments and footer of a normal page, but on a live page, clicking the Hide table button below the table pushes the entire page out of whack. Collapsing a long table this way can leave you looking deep into the comments section.

Is there a way to push the page back to the previous position, or to a specific heading, when the user clicks the wikia-menu-button and collapses a long table from the bottom of a table?

--iEscape (talk) 00:32, February 24, 2015 (UTC)

Show/Hide table

Hide table


 * Good question. Answer:

$(".mw-customtoggle-longTable").click(function{   $('html, body').animate({ scrollTop: $(".mw-customtoggle-longTable").offset.top }, 1000); });
 * I'm not sure if anyone has ever implemented anything like this before, but this will do the trick. As you can see, it specifies your customtoggle by name... so there's probably a more generic way of doing this. How many long tables and custom toggles do you have? (Do you need a generic solution?)-452 00:50, February 24, 2015 (UTC)
 * Thanks for answering! There are five long tables on the page I'm working with. I'm not an administrator on this wikia. Is this script something I can add to a wikia's Common.js without trouble? How generic can you get? Sorry to ask -- I'm not proficient with scripting, or wikis in general. I was hoping there was an attribute, or built-in function that I missed. ;-)--iEscape (talk) 01:05, February 24, 2015 (UTC)


 * (It turns out I had an error in the above script - it's fixed now.)
 * If there is a built-in way, I've never come across it, and I've played around with collapsibles quite a bit. But there still may be something I missed - for instance, I didn't look at the source to see if there was something undocumented.
 * Since you're not an administrator, you'd have to get one to add it to Common.js, so I've made it as generic as I can, that way the admin only needs to add this, then it's available for any custom toggle:

$(".longToggle").click(function{   var scrollToElement = "."+$(this).attr('class').match(/(mw-customtoggle-.*?) /i)[1];  $('html, body').animate({ scrollTop: $(scrollToElement).offset.top }, 1000); });
 * To use: make a customtoggleable table as above, and add the class "longToggle" to the bottom button. So, for the above example, you would use:

Hide table
 * It automatically matches the specific toggle name of each table, so each will scroll to the correct place. -452 02:08, February 24, 2015 (UTC)
 * Wow, that's great 452 -- thanks a million! I tested this under my userspace using your code in my wikia.js and it works just as advertised. I made two changes. One at $(theToggle).offset.top, changing it to $(theToggle).offset.top - 80 so the final scroll position didn't push up into the new wikia navigation bar. The change works fine in Firefox (even using Zoom), though I'm not sure about other browsers.


 * The other change is subjective, perhaps. I changed the animate speed from 1000 to 0. Since tables animate up (from the bottom) during collapse, scrolling the page down, then it all scrolls back up during the scrollTop, I found myself getting a little "scroll motion sickness" during the whole process. Things are snappier using a 0 there, but I don't know if it breaks some "best practices" rules or if a larger part of the community would agree with that change.


 * Would it be trivial to add the ability to the script to send the longToggle to a specified heading? So using longToggle in the class as is, it works just as it does now, but if you add longToggle(#Some_heading), it goes to that heading instead?


 * Finally, do you think that this issue should be addressed in the MediaWiki main code? I see why you wouldn't want a button scrolling itself to the top of the page on every push, but adding a global parameter like yours seems a reasonable to me for situations like this. Thanks again for your time. --iEscape (talk) 04:50, February 24, 2015 (UTC)


 * Good idea with the -80, and I wasn't too sure about that animation speed myself. I personally left it there because I find jumping straight to be a little jarring, but the animation shows where you're going. But you can do whatever you like. :)
 * And yes, that's pretty trivial:

$("[scrollTo]").click(function{   var scrollToElement = $(this).attr('scrollTo');  $('html, body').scrollTop($(scrollToElement).offset.top - 80); }); Hide table Hide table
 * And probably a better implementation that my previous one. With this, you just need to define a scrollTo attribute, and the value is the element you want to scroll to.
 * In case it wasn't clear earlier, when there are multiple of the same element, as is the case with ".mw-customtoggle-longTable", it scrolls to the first one. -452 05:10, February 24, 2015 (UTC)


 * I've edited last example to remove the unused animate function, since the duration was 0 anyway. I do not appreciate my comments being edited, so this is my last edit to this page, and I am now less likely to help people in future. -452 05:30, February 24, 2015 (UTC)

--Echoblast53 (talk | contributions | chat) 00:49, April 3, 2013 (UTC)
 * I've confirmed via Special:Contact that it is common courtesy to not edit other's comments without a good cause, and that there is no requirement on Community Central to use  instead of using a fader for collapsing?


 * No, not with this built in collapsing feature. You would need to write your own custom collapsing JS separate from this one, as this does not support an end-user option for changing the animation. (Perhaps you could request such a feature as a support request at Special:Contact so that Wikia can possibly feed your suggestions upstream to the MediaWiki folks.)


 * Also, the author noted in the $.makeCollapsible source code that sliding does not appear to work properly with tables, so you might want to be careful about that. (CTRL + F, search for "action" to locate the part of the code that collapses the elements.)

Place link in another part of a table

 * Try one of these two possibilities.


 * Both are documented on the help page.
 * Can I do multiple collapsible cells?

--FortressMaximus (talk) 15:23, April 5, 2013 (UTC)
 * I think I can do create changing toggle text when it's not in the header cells by combining two tables, I'll try doing this by css.FortressMaximus (talk) 16:36, April 5, 2013 (UTC)


 * This is a table within a table, with some styling tweaks. Will this work for you?
 * It works but the cell that collapses can't be formated as a data cell, instead it's behaves as another header cell. http://macross.wikia.com/wiki/Template:Infobox/Mecha, the cell is at the bottom and this is the custom table class I made http://macross.wikia.com/wiki/MediaWiki:Wikia.css and an example of the problem http://macross.wikia.com/wiki/VF-11_Thunderbolt#Technology_.26_Combat_Characteristics
 * Nevermind! Fixed it, the cell i placed the internal table in was a header cell so wiki assume the same formatting in the interntal table's data cell, thank you very much guys!FortressMaximus (talk) 17:24, April 5, 2013 (UTC)

Wikia
Does this not work when using the "Wikia" layout? I've been scratching my head over why I could never get it to work using that layout before noticing that this code seems to work fine when I switch over to Monobook. Is there someway to make it work on the Wikia layout too? Siberian99 (talk) 04:54, January 31, 2014 (UTC)
 * It should work under Wikia, and honestly you're unlikely to find something that works on Monobook that doesn't work on Wikia.
 * Could you give a link to a page showing this trouble? Thisismyrofl (talk) 05:42, January 31, 2014 (UTC)
 * I am sorry, I am an idiot. It does work, it just does not show up during edit preview so I frustrated myself over it when all I had to do was click publish! Thank you for the help. --Siberian99 (talk) 06:18, January 31, 2014 (UTC)

Collapsing a template
So I want to collapse a template on my wiki, since it's getting long and I don't want it to eat up too much space on my pages (you can see it here --> http://fanpapalouiecustomers.wikia.com/wiki/Template:ListEightballFCs), but when I try to make the sections collapsible it doesn't work, and attempting to make the whole thing collapsible breaks it entirely.

Is it even possible to collapse a template? :'D

~missing signature (PeridotGem)


 * I made the sections of the template collapsible using mw-customcollapsible/mw-customtoggle pairs. Look at the source to see what I did.
 * Sinthoniel (talk) 16:22, July 16, 2015 (UTC)

Smart collapsing?
I have no idea how to go about this, but I'd like to implement smart collapsing. The template is here.

What I'd like to do is essentially have the page that the template is embedded on be able to detect which season is active based on the page title, to determine which episode it is. If it's a pagename that is relevant to a season 1 episode, then season 1 will not be pre-collapsed. If season 2, then season 2 will default to being open while 1 and 3 are collapsed, and so on.

How would I implement smart collapsing as the default setting? I'm imagining a complex system of ifElse, Case Select, or some other programming jargon like that would be necessary. But I don't know what such scripting would work in MediaWiki.

Anyone with more programming skill willing to take a crack at it and give me some insight? Thanks in advance.

&mdash;IvanRider 17:07, August 10, 2016 (UTC)

Multiple Instances of the Same Toggle
The custom collapse toggles are great for when there's only one instance of a template on the page, but if there's more than one, they all open and close at the same time. Though I came up with a workaround that involves manually assigning an ID to each instance of the template via an appropriately-named ID parameter, it would be far more efficient if this was done automatically, or the toggle only applied to that one instance rather than all of them.

Basically, it'd be nice if someone could help me in making an element such as a div or table row a collapsible toggle for only that instance, rather than all instances on a page, without having to resort to manual workarounds; essentially the text-based expand / collapse if it were a div or table row.

Thanks in advance!

12:37, September 16, 2016 (UTC)

On that thought, I did manage to achieve something similar to what I wanted by messing around with the text-based expand / collapse CSS. It's not perfect, but it gets the job done.

11:47, September 17, 2016 (UTC)

Change colour of toggle button
How do I change the colour of the toggle button, so that it doesn’t use the default wiki colour but instead a custom colour? 20:23, September 25, 2016 (UTC)

Can't change color of expand link inline
I can't figure out a way to change the color of the expand/collapse link.

A collapsible box Yay! You opened the box, sorry there's no secrets here. Maybe you'll give me the secret to changing the expand link above.

As you can see, the color of the link is the standard link color of the wiki, it is not taking its color from the element it is on, the  with the class. If it did, the color of the link would be white, though I did not expect that behavior.

The first thing I tried was putting spans with the correct class as values, but ended up with a mess.

data-expandtext=" Expand " data-collapsetext=" Collapse "

 A collapsible box You can't open this box.

The only way I found to make the link more visible, is to use a button, but the button does not change text from expand to collapse depending on if the box is expanded or collapsed.

 Expand A collapsible box Yay! You opened this box too, but still no secrets.

Is there a way to change the color of the link in the first inline? Is there a way to get the text to change on the button to show whether it is expanded or collapsed? Is there something I missed? Could there be a new option called  or  ?

From the comments above this one, it appears there has yet to be an answer. LA (T) @ 10:05, January 13, 2018 (UTC)
 * You can style it by using wiki CSS (e.g. MediaWiki:Common.css or MediaWiki:Wikia.css). For example:


 * This is the easiest way if you still want the text to change. no replyz 11:24, January 13, 2018 (UTC)


 * I had a bad feeling that was going to be the case. That is not useful for writing exportable template documentation though. Thank you for looking at this. LA (T) @ 00:13, January 14, 2018 (UTC)

see below
 Tap at right [open close ]  and aren't able to use font awesome tag? Still don't know? well, Open and Close aren't on same location.

 And another one

oops, I forgot -- ＊Laclale＊ ( ♪ ) 08:25, April 19, 2019 (UTC)

For lower one, button is not on lower line.-- ＊Laclale＊ ( ♪ ) 13:30, April 21, 2019 (UTC)