implemented Collapsible Content

[z929669]

We have recently discovered that much of the wiki content is collapsible, which will be useful for much of our wiki content like "Detailed Instructions" in the main guide and text-box sidebars in other guides.

 

Wiki editors can surely make use of collapsible content in order to trim down guides and hide info that may be suited to only a small proportion of the target audience.

 

Take a look at the details on how to implement.

 

(thansk to hishutup for instigating our investigation into this topic)

[TechAngel85]

I'll repost this here:

 

I would love to see this code customized. It's much nicer and more intuitive to have an arrow float to the left of the text and change sideways or down depending if the element is expanded or collapsed. Currently the drawback of how it's currently implemented is the "Expand" text gets floated to the right of the element. If your element is wide (say it expands across the entire screen) the "Expand" text could be missed by users due to simply how we read. For example:

 

 

Title Headers Here________________________________________________________________________________________________________________________________________[Expand]

 

Another Title Header Here__________________________________________________________________________________________________________________________________[Collapse]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec diam nisl, ornare eu sagittis at, fringilla et justo. Nam et nibh in ante lacinia egestas. Quisque at nunc ac nunc tincidunt aliquam nec in dui. Integer bibendum at dolor non bibendum. Duis a dui quis arcu scelerisque ultricies sit amet vitae ante. Nulla dapibus, est eget pharetra sollicitudin, velit est pharetra enim, et tristique magna augue et libero. Aliquam in posuere metus. Ut mattis accumsan risus sed dictum. Sed pharetra enim purus, eu posuere ligula vehicula sit amet.

Proin dictum nulla justo, a luctus justo placerat quis. Cras dolor felis, convallis gravida iaculis vitae, blandit quis mauris. Nullam nec hendrerit sapien. Praesent non rhoncus ipsum, vitae condimentum diam. Nam id enim porta, vehicula nulla in, sagittis lectus. Sed id bibendum ligula, eu ultricies lectus. Etiam et augue at turpis interdum tempor ac ut sem. Donec vel porta tortor. Fusce pretium tincidunt odio, vel pharetra nunc rutrum nec. Vestibulum gravida iaculis elit.

 

 

As you can see the "Expand" text is a long way away from where the user would naturally read and the mind naturally ignores the text because it looks almost exactly like the "Edit" text. The following would be much better and more intuitive:

 

 

 â–º Title Header Here______________________________________________________________________________________________________________________________________________

 â–¼ Another Title Header Here_______________________________________________________________________________________________________________________________________

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec diam nisl, ornare eu sagittis at, fringilla et justo. Nam et nibh in ante lacinia egestas. Quisque at nunc ac nunc tincidunt aliquam nec in dui. Integer bibendum at dolor non bibendum. Duis a dui quis arcu scelerisque ultricies sit amet vitae ante. Nulla dapibus, est eget pharetra sollicitudin, velit est pharetra enim, et tristique magna augue et libero. Aliquam in posuere metus. Ut mattis accumsan risus sed dictum. Sed pharetra enim purus, eu posuere ligula vehicula sit amet.

Proin dictum nulla justo, a luctus justo placerat quis. Cras dolor felis, convallis gravida iaculis vitae, blandit quis mauris. Nullam nec hendrerit sapien. Praesent non rhoncus ipsum, vitae condimentum diam. Nam id enim porta, vehicula nulla in, sagittis lectus. Sed id bibendum ligula, eu ultricies lectus. Etiam et augue at turpis interdum tempor ac ut sem. Donec vel porta tortor. Fusce pretium tincidunt odio, vel pharetra nunc rutrum nec. Vestibulum gravida iaculis elit.

 

 

The arrows would indicate immediately before reading the header that it is expandable.

[EssArrBee]

So, I know the link I posted is older, but the same nested collapsible table in regular table concept should apply, right? Also, headings do not work, that is important to point out, especially for the ToC.

[hishutup]

Yeah, I had noticed that the header don't work but that doesn't affect me yet.

 

As for the arrows instead of the [Exapand] is something that I would use because it's an icon rather than a word. This makes it more visible to users but my be confused with the YouTube comparison gallery, unless they we a slightly red-er color.

 

I change in location of the [expand] would also be nice since the 4 drop down I'm my guide at this point are going time contain 3 side by side image scaled down to 480 px. They will up the screen and I believe the expand moved. Haven't checked yet.

 

This wasn't just implemented it had been implemented but none of us knew about it.

 

EDIT: the collapsable menus with the images do weird things but in the ones with on column the [Expand] gets thrown off to the side. This shouldn't be a problem for normally closed menus. Since the user had to click [Expand].

Edited August 21, 2014 by hishutup

[TechAngel85]

So, I know the link I posted is older, but the same nested collapsible table in regular table concept should apply, right? Also, headings do not work, that is important to point out, especially for the ToC.

Headers work when put them inside divs. https://wiki.step-project.com/TestCollapseMenu

 

Since it's older the CSS will probably not work that is on that page. The new CSS is different.

[EssArrBee]

If you create a section and add a bunch of headers inside such as hishutup did on his page, then it will not work. It only works to use a header on the very first line.

[z929669]

It should be pretty simple to change the collaps 'button' to be an image left-justified rather than be a [word]. It would require modifying the applicable server-side js I think. S4n would probably know how to do this much more quickly than I.

[hishutup]

Can't wait...

[EssArrBee]

Can hidden data be searched with ctrl-f? I can't seem to get it to work right.

 

Also, If I hide stuff and then it is gone from the ToC, does that mean it still works with linking to that section? Using <url>/<page>#<section>?

[hishutup]

no ctrl f with data in a collapsed table doesn't work

BUT... It does work when they are open...

 

Oh... hmm in the collapsed tables it doesn't recognize headers... it just leaves

===== Garbage ===== 

[TechAngel85]

It should be pretty simple to change the collaps 'button' to be an image left-justified rather than be a [word]. It would require modifying the applicable server-side js I think. S4n would probably know how to do this much more quickly than I.

I could probably look through it and change it myself. I figured it would be a fairly simple edit to change the js and the CSS, that's the only reason I suggested the change.

[stoppingby4now]

The mw-collapsible mechanism is a jquery plugin delivered with MW. It handles everything related to managing the link that says expand|collapse.

 

For now, the current state is how it will have to be. We don't modify core code as it makes upgrading a huge headache, that gets significantly worse with the more changes that are made. Taking this to the next level will need to have something incorporated into the skin, or an extension.

[hishutup]

For the past 2-4 days now, when I go to load my Oblivion Guide page and the Collapsed Tables start out already expanded. This including a second computer that I don't edit on and on my phone. The Expand/ Collapse activatable text doesn't show if they start out already expanded. 

 

I was just wonder is it happening to anyone else. Is there too much content in the tables for it to work properly. Is there a fix or is it something I have done edits wise. Heres a link to a section that has 4 Collapsable Content tables one after the other.

https://wiki.step-project.com/User:Hishutup/OblivionGuide#2.03_User_Interface

[TechAngel85]

For the past 2-4 days now, when I go to load my Oblivion Guide page and the Collapsed Tables start out already expanded. This including a second computer that I don't edit on and on my phone. The Expand/ Collapse activatable text doesn't show if they start out already expanded. 

 

I was just wonder is it happening to anyone else. Is there too much content in the tables for it to work properly. Is there a fix or is it something I have done edits wise. Heres a link to a section that has 4 Collapsable Content tables one after the other.

https://wiki.step-project.com/User:Hishutup/OblivionGuide#2.03_User_Interface

One first load it is okay. On second load, all the expands seem to not be working. I looked in the code and they're still there...just not working. Looks like something S4N will need to look into.

[DoubleYou]

It seems that the CSS extension for some reason causes it to fail. Any use of the CSS extension on a wiki page will cause any collapsible content to be revealed. This would include any usage of my PageBackground template, since it uses a call to the CSS extension. I discovered this by accident.

[hishutup]

Ah... Ok

what if the content was in a CSS code rather than use jQuery if that what it is... IDK... Ill get into CSS another day