IMPROVE: Allow clicking on whole admonition title (#29)

Co-authored-by: Chris Holdgraf <[email protected]>
Co-authored-by: Chris Holdgraf <[email protected]>

Author: rkdarst

sphinx_togglebutton/_static/togglebutton.css_t

@@ -1,5 +1,5 @@
 /* Visibility of the target */
-.toggle, div.admonition.toggle .admonition-title ~ * {
+.toggle, .admonition.toggle .admonition-title ~ * {
     transition: opacity .5s, height .5s;
 }
 
@@ -14,12 +14,12 @@
 /* Overrides for admonition toggles */
 
 /* Titles should cut off earlier to avoid overlapping w/ button */
-div.admonition.toggle p.admonition-title {
+.admonition.toggle p.admonition-title {
     padding-right: 25%;
 }
 
 /* hides all the content of a page until de-toggled */
-div.admonition.toggle-hidden .admonition-title ~ * {
+.admonition.toggle-hidden .admonition-title ~ * {
     height: 0;
     margin: 0;
     float: left; /* so they overlap when hidden */
@@ -32,6 +32,11 @@ div.admonition.toggle-hidden .admonition-title ~ * {
     position: relative;
 }
 
+/* Clicking the title will toggle the admonition, so a pointer makes this clearer */
+.toggle.admonition .admonition-title {
+    cursor: pointer;
+}
+
 .toggle.admonition.admonition-title:after {
     content: "" !important;
 }

sphinx_togglebutton/_static/togglebutton.js

@@ -24,8 +24,15 @@ var initToggleItems = () => {
       item.insertAdjacentHTML('beforebegin', collapseButton);
     }
 
-    thisButton = $(`#${buttonID}`);
+    thisButton = document.getElementById(buttonID);
     thisButton.on('click', toggleClickHandler);
+    // If admonition has a single direct-child title make it clickable.
+    admonitionTitle = document.querySelector(`#${toggleID} > .admonition-title`)
+    if (admonitionTitle) {
+      admonitionTitle.on('click', toggleClickHandler);
+      admonitionTitle.dataset.target = toggleID
+      admonitionTitle.dataset.button = buttonID
+    }
     if (!item.classList.contains("toggle-shown")) {
       toggleHidden(thisButton[0]);
     }