depends, do you want to keep the look and feel of Mediawiki or would you really like having such a script heavy solution? Because, this decision changes how accessible the wiki would be for NoScript users, as well as how hard it would be to implement.
A simple and ugly, yet alternative solution would be, to create separate sites on the wiki for “short” and “extensive” and let them select like it’s the case here: Verify Whonix ™ Images Software Signatures This would also be independent of scripts, however it’d look far less appealing, then what is on the page you’ve used as an example.
as far as I can tell, there is only one possible way to realise this without JS, which would be more a bulky solution then anything else. It would look like this:
Regardless of which setting is chosen, the text for both detailed and simple is always on the page, just made invisible and small (PT: 1, colour: white) according to the selection. If you PX18030 have a way of realising this without using JS at all, I’d like to hear it.
Have a nice day,
Edit: So, I’ve just build a small code example, which is meant to demonstrate how the whole thing would work. Still needs some polish though, but adding nice looking buttons is easily done after the fact anyway. Here you go:
There are a few problems with this implementation though:
First, since I had to create this without any kind of script, I’m unable to make the size of the iframe dynamic according to the source, which is why the height and width are static. Furthermore, I don’t know how to add this to the wiki. The iframe widget by mediawiki doesn’t support the ability to select the content of the iframe and normal html code is turned of in the wiki, I’m presuming to prevent spam or hijacking… So, if someone could help me with the implementation, I’d be grateful.
Yes you’d have to load up both HTML for simple and advanced. I guess on large pages it could take a long time to load, but it would be simpler for maintenance as it can be all one wiki page broken down into two main sections.
Start with one or both of the elements hidden, then when a button is clicked hide and show the related elements.
A nice explanation of CSS3 hiding, can be found here with a demo.
iFrames, there is a security discussion about using them. Generally they are safe if you link to pages under your domain, but if a page under you domain contains an XSS, then all pages could include it, by pointing an iFrame to that page and including it on all pages.
They also decrease the search engine optimisation for the site, as you’d have one page URL, which serves up n iFrames.
Personally I’d disable iFrames with the header X-Frame-Options: DENY
Maybe I’ll have an idea on how to realise this better, though I doubt it…
I am not concerned about page load times because of the increased page size. The easy versions would be really short, so they should add only negligible weight.
Yes. Raw html has been disabled in the wiki for security reasons. But that should not be an issue, because we have mediawiki extension widgets installed. It allows admins to create widgets, that are just any html code, that can be imported by anyone from normal wiki pages.
One thing you may or may not have in mind yet may be a non-issue. We probably do not have to copy/paste the easy versions into the detailed version. A mediawiki template can be used to avoid this.
One thing I don’t like about http://www.cssportal.com/css3-preview/demo/css-menu-ex1.html is that it relies on the :focus pseudo-class, which means if you click on “hide” the content gets hidden as expected, but if you click anywhere else after that the element loses its focus and the hidden content appears again.
I assume the content of the short versions would be too long for TL;DR sections?
I could help to implement something like that with JS and if JS is not available display both versions (and maybe a link to skip the short version and go directly to the longer one), I have just never worked with mediawiki.
Can I use jQuery (which seems to be provided by mediawiki) or would you prefer a standalone solution?
I just looked at existing widgets, is it possible to place the CSS in JS code in external files? Otherwise you’ll get a lot of duplicate code in your output.
You can use jQuery outside of mediawiki, but using jQuery just for that somewhere else would be a bit overkill.
I am pretty sure that you can’t implement a “click a button to show/hide” function just in css because that requires to store the information if the element is hidden or not and AFAIK that is not possible with just css alone.