From 64bd8eef4b1e08d0521f91f9b2cdb7369e946521 Mon Sep 17 00:00:00 2001
From: Mario <mario@mariovavti.com>
Date: Wed, 2 Oct 2024 20:08:04 +0000
Subject: Use html details element for toc on top of help pages.

This allows us to get rid of some more unneccessary JavaScript that just
implements stuff that web browsers now do anyways.


(cherry picked from commit 26ce231951e62f1912d457c8f6e6b0f2092173f1)

Co-authored-by: Harald Eilertsen <haraldei@anduin.net>
---
 view/css/mod_help.css |  9 ++++++++-
 view/js/mod_help.js   | 11 -----------
 view/tpl/help.tpl     | 11 ++++-------
 3 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/view/css/mod_help.css b/view/css/mod_help.css
index 3c3bc195f..ef40552d4 100644
--- a/view/css/mod_help.css
+++ b/view/css/mod_help.css
@@ -15,6 +15,14 @@
 	list-style-type: none;
 }
 
+#doco-top-toc-wrapper {
+	margin-bottom: 1em;
+}
+
+#doco-top-toc-wrapper > summary {
+	font-size: large;
+}
+
 .toc-content li,
 	#doco-top-toc li {
 	padding: 3px 0px;
@@ -23,4 +31,3 @@
 #doco-side-toc li {
 	padding-left: 20px;
 }
-
diff --git a/view/js/mod_help.js b/view/js/mod_help.js
index abd0d1194..8308f23ec 100644
--- a/view/js/mod_help.js
+++ b/view/js/mod_help.js
@@ -1,14 +1,3 @@
-function docoTocToggle() {
-	if ($('#doco-top-toc').is(':visible')) {
-		$('#doco-toc-toggle').removeClass('bi-gear').addClass('bi-caret-right');
-	} else {
-		$('#doco-toc-toggle').removeClass('bi-caret-right').addClass('bi-caret-down');
-	}
-	$('#doco-top-toc').toggle();
-
-	return false;
-}
-
 toc = {};
 // Generate the table of contents in the side nav menu (see view/tpl/help.tpl)
 $(document).ready(function () {
diff --git a/view/tpl/help.tpl b/view/tpl/help.tpl
index ce3f46fdb..8b7669c75 100644
--- a/view/tpl/help.tpl
+++ b/view/tpl/help.tpl
@@ -8,13 +8,10 @@
 	</div>
 	{{/if}}
 	<div class="section-content-wrapper">
-		<h3 id="doco-top-toc-heading">
-			<span class="fakelink" onclick="docoTocToggle(); return false;">
-				<i class="bi bi-caret-right fakelink" id="doco-toc-toggle"></i>
-				{{$module->get_toc_heading()}}
-			</span>
-		</h3>
-		<ul id="doco-top-toc" style="margin-bottom: 1.5em; display: none;"></ul>
+		<details id="doco-top-toc-wrapper">
+			<summary id="doco-top-toc-heading">{{$module->get_toc_heading()}}</summary>
+			<ul id="doco-top-toc"></ul>
+		</details>
 		<div id="doco-content">
 			{{$module->render_content()}}
 		</div>
-- 
cgit v1.2.3