Wikia

Community Central

Talk:Collapsing

Back to page

105,230pages on
this wiki

Collapsing long tables Edit

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 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 @Wikia 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 Edit

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 Edit

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

I want the problem solved without inline CSS.

See the problem here:

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 SlidingEdit

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

Place link in another part of a table Edit

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 (wallcontribs) . Please sign your posts with ~~~~!

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. 20px_Rin_Tohsaka_Avatar.png 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 Edit

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 templateEdit

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

Around Wikia's network

Random Wiki