Add toggle buttons to show/hide class names

docs/usage/object.md

@@ -207,8 +207,10 @@ by its qualified name.
 The heading of a method's documentation
 contains a tooltip displaying the full name of the method
 along with the class to which the method belongs.
-You can also click the prefix *method* to display the
-qualified names of all methods on the current page.
+You can also click the
+<i class="fa-solid fa-square-plus"></i>
+button to display the qualified names of all methods
+on the current page.
 
 ## Source Code
 

src/mkapi/css/mkapi-common.css

@@ -139,15 +139,12 @@ ul.mkapi-item-list {
 }
 
 .mkapi-document-toggle,
+.mkapi-parent-toggle,
 .mkapi-section-toggle {
   cursor: pointer;
   color: var(--mkapi-punctuation-color);
 }
 
-.mkapi-parent-toggle {
-  cursor: pointer;
-}
-
 .mkapi-page-object {
   margin-block-end: 0px;
   border-bottom: 1px solid var(--mkapi-object-border-color);

src/mkapi/javascript/mkapi.js

@@ -40,5 +40,15 @@ parentButtons.forEach((button) => {
     elements.forEach((element) => {
       element.style.display = isVisible ? "none" : "inline";
     });
+
+    const buttons = document.querySelectorAll(".mkapi-parent-toggle");
+    buttons.forEach((button) => {
+      const icon = button.querySelector("i");
+      if (icon) {
+        icon.className = isVisible
+          ? "fa-solid fa-square-plus"
+          : "fa-solid fa-square-xmark";
+      }
+    });
   });
 });

src/mkapi/templates/object.jinja2

@@ -1,11 +1,11 @@
 <p class="mkapi-object mkapi-page-{{ namespace }}" id="{{ id }}" markdown="1">
 <span class="mkapi-object-link">
-[{{ namespace }}][__mkapi__.__{{ namespace }}__.{{ obj_id }}]
 {% if parent -%}
 <span class="mkapi-parent-toggle" title="Toggle class names">
-<i class="fa-regular fa-square-minus"></i>
+<i class="fa-solid fa-square-plus"></i>
 </span>
 {%- endif %}
+[{{ namespace }}][__mkapi__.__{{ namespace }}__.{{ obj_id }}]
 <span class="mkapi-document-toggle" title="Toggle all docs">
 <i class="fa-regular fa-square-minus"></i>
 </span>