Cannot export org mode to collapsible HTML

Question

I am trying to have basic collapsing/folding functionality for sections in the HTML file that has been exported from org-mode, since the files I want to share are very large. I am using Emacs 26.2 (9.0) and Org 9.1.9 on a Mac.

This seems like a built in feature, but I haven't seen any effect from adding #+INFOJS_OPT commands to my org files before exporting to HTML. I also saw another tool mentioned on the mailing lists, but without any examples I don't know how apply it to a specific org file I have.

For example, the following file is converted to HTML which looks identical to the same file without the INFOJS_OPT lines

#+Title+: JS test
#+INFOJS_OPT: path:js/org-info.js
#+INFOJS_OPT: toc:nil ltoc:nil view:overview mouse:underline
#+INFOJS_OPT: home:https://orgmode.org buttons:nil
* Chapter 1
** Section 1
*** Part 1
 - csp
** Section 2
 - cs2p

I have a freshly-downloaded copy of js/org-info.js.

There is a slight difference in the HTML generated, but this seems to have no effect. I'm at a loss for how I can have folding in the resulting HTML - open to solutions even outside of org-info.js.

Answer 1

Seems that org-info.js is not maintained anymore. Here they provide the source code in JavaScript, for anyone willing to tweak/update it.

https://lists.gnu.org/r/emacs-orgmode/2017-07/msg00049.html

Luckily someone updated it (thanks Daniel Clemente!).

The procedure is:

• Download esquemadorg.js at the following link: https://www.danielclemente.com/pagina/esquemadorg.js
• Add the following lines at the top of your .org file

#+HTML_HEAD_EXTRA: <script type="text/javascript"  src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
#+HTML_HEAD_EXTRA: <script type="text/javascript" src="esquemadorg.js"></script>

Make sure that src="esquemadorg.js" points at the file relative to where the html exported file is located.

Some text in Spanish (or Portuguese?) will appear on the exported document. You can do a full search in the esquemadorg.js file and change it to English. Mine looks like this now.

    par.append(document.createTextNode("Press on a section header to collaps/expand it."));
    par.append( $( document.createElement('a') ).text(" COLLAPSE ALL ").addClass("globalexpandtool").click(close_all_sections));
    par.append( $( document.createElement('a') ).text(" SHOW ALL  ").addClass("globalexpandtool").click(open_all_sections));
    $("div#table-of-contents").after(par);