Revealing “hidden” section in org-mode doc exported to HTML

Here, I’ll describe how to include a “hidden” section, in a HTML document exported from org-mode which uses org-info.js.

The section isn’t displayed at page load, and only revealed once the ‘n’ letter is pressed (accessing next section).

The trick is to have a section with an empty headline, with no headlines numbering, containing a <div> whose class is for instance myhidden the :

#+options: num:nil
...
*         <---- this line contains unbreakable space C-x 8 SPC
#+HTML: <div class="myhidden">

...

#+HTML: </div> <!-- .myhidden -->

The div will be hidden, cause we tell the CSS to hide it :

#+HTML_HEAD_EXTRA: <style> 
#+HTML_HEAD_EXTRA: .myhidden {display: none; visibility:hidden;}
#+HTML_HEAD_EXTRA: </style>

The document uses the org-info.js :

#+INFOJS_OPT: view:showall toc:nil buttons:nil

Then, I’m adding a hook, for handling the next page display, which
will switch the visibility :

#+HTML_HEAD_EXTRA: <script type="text/javascript">
#+HTML_HEAD_EXTRA: /* <![CDATA[ */
#+HTML_HEAD_EXTRA:
#+HTML_HEAD_EXTRA: function toggle_visibility() {
#+HTML_HEAD_EXTRA:    var elements = document.getElementsByClassName("myhidden"),
#+HTML_HEAD_EXTRA:        n = elements.length;
#+HTML_HEAD_EXTRA:    for (var i = 0; i < n; i++) {
#+HTML_HEAD_EXTRA:      var e = elements[i];
#+HTML_HEAD_EXTRA: 
#+HTML_HEAD_EXTRA:      if(e.style.display == 'block') {
#+HTML_HEAD_EXTRA:        e.style.display = 'none'
#+HTML_HEAD_EXTRA:        e.style.visibility = 'hidden';
#+HTML_HEAD_EXTRA:      } else {
#+HTML_HEAD_EXTRA:        e.style.display = 'block';
#+HTML_HEAD_EXTRA:        e.style.visibility = 'visible';
#+HTML_HEAD_EXTRA:      }
#+HTML_HEAD_EXTRA:   }
#+HTML_HEAD_EXTRA: }
#+HTML_HEAD_EXTRA:
#+HTML_HEAD_EXTRA: orgInfoHooks = {
#+HTML_HEAD_EXTRA: 'onShowSection': [
#+HTML_HEAD_EXTRA:     toggle_visibility,
#+HTML_HEAD_EXTRA:   ]};
#+HTML_HEAD_EXTRA: /* ]]> */
#+HTML_HEAD_EXTRA: </script>

Yeah, that’s a hack, but it may work.