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.