From e41c1cbe9f0476997eac7b4a3f17cbc6b2262faf Mon Sep 17 00:00:00 2001
From: Tim Baumann <tim@timbaumann.info>
Date: Mon, 9 Oct 2017 18:33:09 +0200
Subject: Use <details> element for collapsibles (#690)

* Remove unnecessary call to 'collapseSection'

The call is unnecessary since there is no corresponding toggle for hiding the
section of orphan instances.

* Use <details> for collapsibles

This makes them work even when JS is disabled. Closes #560.
---
 html-test/ref/Bug335.html | 44 +++++++++++++++++++++++++-------------------
 1 file changed, 25 insertions(+), 19 deletions(-)

(limited to 'html-test/ref/Bug335.html')

diff --git a/html-test/ref/Bug335.html b/html-test/ref/Bug335.html
index 8aaf4349..f2185045 100644
--- a/html-test/ref/Bug335.html
+++ b/html-test/ref/Bug335.html
@@ -39,18 +39,20 @@
 	>Bug335</p
 	></div
       ><div id="synopsis"
-      ><p id="control.syn" class="caption expander" onclick="toggleSection('syn')"
-	>Synopsis</p
-	><ul id="section.syn" class="hide" onclick="toggleSection('syn')"
-	><li class="src short"
-	  ><a href="#"
-	    >f</a
-	    > :: ()</li
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
 	  ><li class="src short"
-	  ><a href="#"
-	    >g</a
-	    > :: ()</li
-	  ></ul
+	    ><a href="#"
+	      >f</a
+	      > :: ()</li
+	    ><li class="src short"
+	    ><a href="#"
+	      >g</a
+	      > :: ()</li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
@@ -63,12 +65,14 @@
 	    >#</a
 	    ></p
 	  ><div class="doc"
-	  ><h3 id="control.ch:f0" class="caption expander" onclick="toggleSection('ch:f0')"
+	  ><h3 class="caption details-toggle-control details-toggle" data-details-id="ch:f0"
 	    >ExF:</h3
-	    ><div id="section.ch:f0" class="hide"
-	    ><p
+	    ><details id="ch:f0"
+	    ><summary class="hide-when-js-enabled"
+	      >Expand</summary
+	      ><p
 	      >abc</p
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	><div class="top"
@@ -79,10 +83,12 @@
 	    >#</a
 	    ></p
 	  ><div class="doc"
-	  ><h3 id="control.ch:g0" class="caption expander" onclick="toggleSection('ch:g0')"
+	  ><h3 class="caption details-toggle-control details-toggle" data-details-id="ch:g0"
 	    >ExG:</h3
-	    ><div id="section.ch:g0" class="hide"
-	    ><pre class="screen"
+	    ><details id="ch:g0"
+	    ><summary class="hide-when-js-enabled"
+	      >Expand</summary
+	      ><pre class="screen"
 	      ><code class="prompt"
 		>&gt;&gt;&gt; </code
 		><strong class="userinput"
@@ -106,7 +112,7 @@
 	      >Under ex</h4
 	      ><p
 	      >foo</p
-	      ></div
+	      ></details
 	    ><h2
 	    >Out of Ex</h2
 	    ><p
-- 
cgit v1.2.3