Rosetta Code:Village Pump/Foldable output

The example out of any task that generates ASCII graphs or ASCII art output, such as Life in two dimensions, leads to a loooong page. it would be good if you could implement some tag to surround text that would initially render that text as a single line stating that the real text is hidden, and that clicking on the line would expand to show the hidden text. --Paddy3118 06:42, 25 October 2008 (UTC)

That would require JavaScript. We've avoided using Javascript thus far, because it's a PITA do do right without adopting a framework of some sort. For it to happen...someone else would have to do it. I'm finding myself with less and less time of late. --Short Circuit 03:35, 28 October 2008 (UTC)

If it is done with a MediaWiki extension, the JavaScript part should be trivial: Basically it just sets the CSS display attribute of the corresponding div either to "block" (show) or to "none" (hide). The MediaWiki extension would of course have to generate unique ids for those blocks, and generate the links to show/hide the navigation. I don't know how complicated such a MediaWiki extension would be (maybe it even already exists).

Alternatively, a pure JavaScript solution would be possible. It wouldn't be that hard either. Basically, in the page you'd write something like

<div class="hideable" display="none">
(Text which should be hidden)
</div>

and on page load have the JavaScript scan for all class="hideable" and prepend them with a link to the show/hide function (which would be basically the same as before, except now the index could be used instead of an explicit ID). I'd try that out, but User-Javascript seems to be disabled here.

Probably there should be a convention that the hideable part would be surrounded by an always divisible div which just tells you that there's a hidden output area. This is, of course, not part of the JavaScript.

Also note that all the boilerplate could easily be hidden in a MediaWiki template. --Ce 09:08, 28 October 2008 (UTC)

I just tried using the textarea tag and that failed too. I had hoped that something like: '<textarea cols="80" rows="20" readonly="readonly" wrap="off">' would confine the output to a scrollable box, but it did not work. --Paddy3118 05:59, 29 October 2008 (UTC)

A good idea. The following works:

Example:

Test
Another line
Yet another line, this time one which clearly is much longer than the width of the browser window, at least assuming normal screen dimensions and font settings, and assuming the browser window is not wider than the screen (which would be impractical anyway).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21