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