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

Stuff	Junk
A	B
C	D
E	F
G	H
I	J
K	L
M	N
O	P
Q	R
S	T
U	V
W	X
Y	Z
1	2
3	4
5	6
7	8
9	!
@	#
%	^
&	*
(	)
A	B
C	D
E	F
G	H
I	J
K	L
M	N
O	P
Q	R
S	T
U	V
W	X
Y	Z
1	2
3	4
5	6
7	8
9	!
@	#
%	^
&	*
(	)
A	B
C	D
E	F
G	H
I	J
K	L
M	N
O	P
Q	R
S	T
U	V
W	X
Y	Z
1	2
3	4
5	6
7	8
9	!
@	#
%	^
&	*
(	)

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:

<span class="mw-customtoggle-longTable longToggle wikia-menu-button">Hide table</span>

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);
});
<span class="mw-customtoggle-longTable wikia-menu-button" scrollTo="#Collapsing_long_tables">Hide table</span>
<span class="mw-customtoggle-longTable wikia-menu-button" scrollTo=".mw-customtoggle-longTable">Hide table</span>

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)

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 <source> tags on a talk page. From this, I conclude that replacing <nowiki> with <source> is therefore not a good cause, and is also discourteous. I have also confirmed that it is not considered "edit warring" for me to restore the original formatting of my own comments, so I have now restored my original formatting of the javascript blocks in my own comments.

I did not indent my javascript blocks originally as I did not think there would be any confusion regarding them, but I have now added indenting, as adding indenting is a valid reason to edit someone else's comments if indenting is strictly enforced.

Speaking of formatting, iEscape, I assume that you added this section at the top of the page instead of the bottom in order to better demonstrate the problem when the table was collapsed. This section is long enough now that having it at the bottom of the page will still illustrate the problem. Although I'm probably allowed to move it myself, I'll do you the courtesy simply making the suggestion and leaving it up to you to move it. -452 15:37, February 27, 2015 (UTC)

I edited the "page" to increase readability (had nothing to do with who left the comments) and nothing else. It was not meant to be discourteous in any way. I personally had issues following the conversation because of the lack of indention and source tags are easier to read/sift through than unformated text blocks. Rappy 17:32, February 27, 2015 (UTC)

I'm sorry that the lack of indentation confused you, I will endeavour in future to always remember to indent code to the same level as the rest of my comments. -452 17:51, February 27, 2015 (UTC)

table with some rows collapse

Hai there, is there a method to create a table and set some rows are collapsible and the rest are not ?

in the previous version , i can use this

some rows are collapsible

{| class="wikitable collapsible"
!colspan="2"| Title
|- class="nocollapse"
| Column 1 || Column 2
|- class="nocollapse"
| abc || def
|- 
| 123 || 765
|- 
| xyz || 123
|- class="nocollapse"
| pqr || 987
|-
|}

by WieQuadrat (talk) 18:17, September 4, 2012 (UTC)

This can be realised with a custom toggle.

wiki markup

{| class="wikitable"
!colspan="2"| Title <span class="mw-customtoggle-test wikia-menu-button">[+/-]</span>
|-
| Column 1 || Column 2
|-
| abc || def
|- id="mw-customcollapsible-test" class="mw-collapsible"
| 123 || 765
|- id="mw-customcollapsible-test" class="mw-collapsible"
| xyz || 123
|-
| pqr || 987
|}

result

Title [+/-]
Column 1	Column 2
abc	def
123	765
xyz	123
pqr	987

Arkondi (talk) 13:24, October 14, 2012 (UTC)

Change the color of the expand-collapse link

How can I change the color of the expand-collapse link text? I want to do this here I assume:

• http://cannabis.wikia.com/wiki/MediaWiki:Wikia.css

I want the problem solved without inline CSS.

See the problem here:

• http://cannabis.wikia.com/wiki/User:Timeshifter/Sandbox_20

Also, how can I add a couple nonbreaking spaces in front of the expand-collapse link? I want this problem also solved without inline CSS. --Timeshifter (talk) 19:13, March 14, 2013 (UTC)

Jquery Sliding

Is it possible to use the Jquery Effect .slideToggle() instead of using a fader for collapsing? --Echoblast53 (talk | contributions | chat) 00:49, April 3, 2013 (UTC)

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.) Mathmagician ƒ(♫) 02:43 UTC, Wednesday, 3 April 2013

Place link in another part of a table

Foo title
a	1
b	2
I want the link next to this text
I want this cell to collapse

—This unsigned comment is by FortressMaximus (wall • contribs). Please sign your comments by adding "~~~~" in the source editor.

Try one of these two possibilities.

Foo title
a	1
b	2
I want the link next to this text [Expand/Collapse]
This cell collapses. Note that the downside to this approach is that the custom toggler can't alternate between "Expand" and "Collapse", so it will look a bit different.

Foo title
a	1
b	2
I want the link next to this text This text collapses. Note that the class="mw-collapsible-content" element needs to be a child node of the class="mw-collapsible" node. Meaning that you can't have them be in separate table cells if you do it this way.

Both are documented on the help page. Mathmagician ƒ(♫) 02:43 UTC, Wednesday, 3 April 2013

Can I do multiple collapsible cells?

Foo title
a	1
b	2
I want the link next to this text How do I get this in its own cell, because it's formatted like a header cell not a data cell
I want the link next to this text I've tried doing it with multiple cells but these conflict

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

Foo title
a	1
b	2
Link next to this text This text collapses

This is a table within a table, with some styling tweaks. Will this work for you?    ǝsʞpɐןǝ  (message wall)  16:42, 5 April 2013

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.

—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!

◥ PLASMOIDTHUNDER ◤ (user | talk) 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.

◥ PLASMOIDTHUNDER ◤ (user | talk) 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?[Template fetch failed for https://community.fandom.com/wiki/Template:papi?action=raw: HTTP 404] 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 <div> with the class color1. 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="<span class="color1">Expand</span>" data-collapsetext="<span class="color1">Collapse</span>"

<div class="accent mw-collapsible mw-collapsed" data-expandtext="Expand" data-collapsetext="Collapse" style="border-width:1px; border-style: dotted;">

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 mw-collapse-link-onClass-color1 or mw-collapse-link-color-white?

From the comments above this one, it appears there has yet to be an answer. LA (T) @ 10:05, January 13, 2018 (UTC)