http://www.dartlang.org/docs/editor/getting-started/

It uses a library called "dartswitcher".

This css code can be used to turn display of blocks on and off: http://www.javascriptkit.com/javatutors/dom3.shtml

I experimented with using a role attribute on a section, and it works. The issue is that the TOC remains, and the section numbering is then out of whack.

Next line of attack:

1. Use Modernizr to detect the capabilities of the browser and degrade gracefully
http://modernizr.com/docs/

2. Try this approach to render the TOC and numbering in the browser, so that it will update when sections are displayed / hidden:

http://www.alistapart.com/articles/building-books-with-css3/

Something to consider: what does it mean when one of the visible sections refers to an invisible section?

Pusher.com have an approach that I just might be able to pull off in time for MRG 2.2.

We wrap our code samples like this in Docbook:

<variablelist role="code-div">
  <varlistentry role="code">
    <term>C++</term>
    <listitem><programlisting language="C++">Sender sender = session.Sender("something")</programlisting></listitem>
  </varlistentry>
  <varlistentry role="code">
    <term>Python</term>
    <listitem><programlisting language="Python">sender = session.sender("something")</programlisting></listitem>
  </varlistentry>
</variablelist>

In standard HTML this renders as very readable output.

With javascript, however, we can offer another level of experience if the reader's browser supports it.

The HTML output of the above looks like this:

<div class="variablelist code-div">
  <dl>
    <dt class="varlistentry code">
      <span class="term">C++</span>
    </dt>
    <dd>
      <pre class="programlisting C++">Sender sender=session.Sender(<span class="perl_String">"something"</span>)</pre>
    </dd>
    <dt class="varlistentry code">
      <span class="term">Python</span>
    </dt>
    <dd>
      <pre class="programlisting Python">sender <span class="perl_Char">=</span> ssn.sender<span class="perl_Char">(</span><span class="perl_String">"something"</span><span class="perl_Char">)</span></pre>
    </dd>
  </dl>
</div>


So what we want to do with this is:

1. Find the .code-div class element
2. Create a <ul> element as the first child. This will be the tabs.
3. Create a <div> element directly below the <ul> element. This will be the container for the programlistings.
4. Next we select each <dt> element and the <dd> element directly after it
5. We make the inner HTML of the <dt> element a <li> in our <ul> from step 2.
6. We delete the <dt> node.
7. We give the <dd> element a unique ID, and inject it into the onclick() event in step 8.
8. We give our <li> element in step 5 an onclick() event. This event will hide all children of its .code-div, and show the injected <li>

So all you need to do is this:

<variablelist role="code-div">
  <varlistentry>
    <term>CODE-LANG</term>
    <listitem><programlisting>...</programlisting></listitem>
  </varlistentry>
  <varlistentry>
    <term>CODE-LANG</term>
    <listitem><programlisting>...</programlisting></listitem>
  </varlistentry>
</variablelist>

current supported CODE-LANGS are: C++, Python, Ruby, C#/.NET, Node.js, Java, HTML, JavaScript.

You can add a "language" attribute to each <programlisting> element with no problems.

When your variablelist is rendered using the brand it will appear as nice list of programming examples. If javascript is enabled and the reader is looking at the html or html-single, however, it will turn into a tabbed dialog, and they can select which language they want to look at.

Code tabs are now alphasorted automatically in the html output, and the variablelist role to use is the more semantic 'codetabs'.

https://github.com/jwulf/fudcon-docs-hack/commit/eeb3394c3b4bf40907d052cf058348febc75b9f6

Atm the author has to set the language twice - once in the variablelist term to get the code tabs functionality, once in the programlisting language attribute to get syntax highlighting.

It makes sense to trigger the whole thing of the <programlisting> language attribute. In this case the variablelist <term> will be dropped, and the language extracted from the class of the <dd>.

To make "the other class of the dd who has a class of programlisting" reliable, the xsl should be modified to write "language-XXX" as the class. Investigate!