Bookmarklet idea — Collapse all subsections?

When looking at some articles at Rosetta Code I came up with the idea of «What if we could collapse all the language subsections?», or in the more general sense «What if we could add collapsing to all subsections of a web page?».

The gist of the idea is that for a site like Rosetta Code where you could be interested in mainly one or a few languages, most of the sections are not so interesting. Similarily on a web page with rather a long text, it could be interesting to look only at a particular section. Wouldn’t it then be nice to collapse all the other sections, and expand them when needed?

Introducing bookmarklets

To achieve this one needs to change the web page in question. Ideally one could contact the web author and ask them to add collapsible sections, but this is not feasible in all cases. Another option would be to use some Greasemonkey scripts (or user scripts), but these are depreceated by a number of reasons.

Bookmarklets are however still applicable, and not so dangerous to use, as you choose when and on which pages you want to activate them. You might need to reenable them after clicking on a new link, but they could do the trick for this task.

Make Your Own Bookmarklets With jQuery from Smashing Magazine and Create bookmarklets the right way from tuts+, shows examples of what is needed to make an jQuery enabled bookmarklet. Either of these could be used as a base template together with the pseudocode and specifics given below. For those interested in playing a little with this, you could also install the jQuerify extension for Chrome.

General pseudocode

The gist of the idea to get collapsible section are:

• The web site needs to use logical well-structured html, and header elements (h1 through h6) which will be used to divide into sections
• If a header element does not have an id, assign an unique id to the header element
• Add div’s between header elements at same level, where the id of the div corresponds to the header id
• For each header element add span element with text of show or hide
• Use jQuery (or similar) to hide/show sections when clicking the span elements
• Possibly change formatting of header elements so that they don’t use that much space

Some specifics for Rosetta Code

When applied to Rosetta Code, i.e. see String_length and/or String_lenght#Swift, one could imagine that the first would render the whole page, but collapse all sections from h2 and lower. The second variant (with a language tag) could then autoexpand the Swift section, and thusly show the general description and the corresponding solution for the Swift language.

Maybe it also would be nice to auto-hide the TOC, and possibly change all the headers into a comma separated list, which could expand the given section. (In other words, auto-hide all the header’s and all div’s, and only show a clickable language name which would show/hide that language.

The main part of the page would then look something like:

<h1>String length</h1>
In this task, the goal is to find the character and byte length of a string …
… and 14 bytes when encoded in UTF-8.
Contents [show ]

4D, ActionScript, Ada, … , Standard ML
<h2>Swift ______________________________________ (edit) </h2>
<h3>Character length</h3>
Swift has a concept of …
… end of text
Tcl, TI-89 BASIC, …, zkl

Do note that none of the links are actually working!

Can someone make the bookmarklet?

I do believe this is possible to achieve without to much work, but I’m not sure if I’m currently able to do this in javascript (both due to time constraints and due to limited knowledge of javascript/jQuery). But if someone attempts to do implement this, please let me know, and please let the code be open sourced.

Possibly the specific version for Rosetta Code could be made into a Chrome extension, or if some of the system administrators sees this and like the idea, they could make it a part of the Rosetta Code site as well.

I for one would at least love to see this implemented on Rosetta Code, in addition to having the category pages for a given language auto-link to that language section.