Detangle src/readtheorg_theme/js/readtheorg.js

src/readtheorg_theme/readtheorg.org

@@ -16,9 +16,9 @@ Get the lowdown on the key pieces of ReadTheOrg's infrastructure, including our
 approach to better HTML export.
 
 * Typography
-  :PROPERTIES:
-  :header-args: :tangle css/readtheorg.css
-  :END:
+:PROPERTIES:
+:header-args: :tangle css/readtheorg.css
+:END:
 
 #+begin_src css
 @import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic|Roboto+Slab:400,700|Inconsolata:400,700");
@@ -216,9 +216,9 @@ dl dd{
 #+end_src
 
 * Media queries
-  :PROPERTIES:
-  :header-args: :tangle css/readtheorg.css
-  :END:
+:PROPERTIES:
+:header-args: :tangle css/readtheorg.css
+:END:
 
 #+begin_src css
 @media print{
@@ -357,9 +357,9 @@ dl dd{
 #+end_src
 
 * Code
-  :PROPERTIES:
-  :header-args: :tangle css/readtheorg.css
-  :END:
+:PROPERTIES:
+:header-args: :tangle css/readtheorg.css
+:END:
 
 ** Inline
 
@@ -437,9 +437,9 @@ pre.src{
 #+end_src
 
 * Tables
-  :PROPERTIES:
-  :header-args: :tangle css/readtheorg.css
-  :END:
+:PROPERTIES:
+:header-args: :tangle css/readtheorg.css
+:END:
 
 ** Basic example
 
@@ -494,9 +494,9 @@ table tr:nth-child(2n) td{
 #+end_src
 
 * Images
-  :PROPERTIES:
-  :header-args: :tangle css/readtheorg.css
-  :END:
+:PROPERTIES:
+:header-args: :tangle css/readtheorg.css
+:END:
 
 ** Optional image caption
 
@@ -509,9 +509,9 @@ table tr:nth-child(2n) td{
 #+end_src
 
 * Helper classes
-  :PROPERTIES:
-  :header-args: :tangle css/readtheorg.css
-  :END:
+:PROPERTIES:
+:header-args: :tangle css/readtheorg.css
+:END:
 
 #+begin_src css
 .rotate-90{
@@ -532,9 +532,9 @@ table tr:nth-child(2n) td{
 #+end_src
 
 * Responsive utilities
-  :PROPERTIES:
-  :header-args: :tangle css/readtheorg.css
-  :END:
+:PROPERTIES:
+:header-args: :tangle css/readtheorg.css
+:END:
 
 Responsive for sidebar:
 
@@ -595,9 +595,9 @@ Responsive for sidebar:
 #+end_src
 
 * CSS
-  :PROPERTIES:
-  :header-args: :tangle css/readtheorg.css
-  :END:
+:PROPERTIES:
+:header-args: :tangle css/readtheorg.css
+:END:
 
 #+begin_src css
 *{
@@ -1274,9 +1274,9 @@ for nice yellow or orange boxes.
 #+end_src
 
 * Htmlize
-  :PROPERTIES:
-  :header-args: :tangle css/htmlize.css
-  :END:
+:PROPERTIES:
+:header-args: :tangle css/htmlize.css
+:END:
 
 #+begin_src css
 .org-bold { /* bold */ font-weight: bold; }
@@ -1427,11 +1427,31 @@ for nice yellow or orange boxes.
 #+end_src
 
 * JS
-  :PROPERTIES:
-  :header-args: :tangle js/readtheorg.js
-  :END:
+:PROPERTIES:
+:header-args: :tangle js/readtheorg.js
+:END:
 
 #+begin_src js
+function collapse_toc_elements_on_click (nav_li_a){
+    /*
+      When an `a' element in the TOC is clicked, its parent
+      `li' element's active attribute is toggled.  This causes
+      the element to toggle between minimized and maximized
+      states.  The active attribute is documented in bootstrap.
+      https://getbootstrap.com/docs/4.0/components/navbar/#nav
+    */
+    $(nav_li_a).parent().toggleClass("active");
+}
+
+$( document ).ready(function() {
+    // When the document is loaded and ready, bind the
+    // function `collapse_toc_elements_on_click' to the
+    // `a' elements in the table of contents.
+    $("#text-table-of-contents a").click(function() {
+        collapse_toc_elements_on_click(this);
+    });
+});
+
 $(function() {
     $('.note').before("<p class='admonition-title note'>Note</p>");
     $('.seealso').before("<p class='admonition-title seealso'>See also</p>");