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/Instances.html | 320 +++++++++++++++++++++++++------------------
 1 file changed, 186 insertions(+), 134 deletions(-)

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

diff --git a/html-test/ref/Instances.html b/html-test/ref/Instances.html
index e4a84a35..84c9498f 100644
--- a/html-test/ref/Instances.html
+++ b/html-test/ref/Instances.html
@@ -65,14 +65,14 @@
 	      ></table
 	    ></div
 	  ><div class="subs instances"
-	  ><p id="control.i:-60--126--126-" class="caption collapser" onclick="toggleSection('i:-60--126--126-')"
-	    >Instances</p
-	    ><div id="section.i:-60--126--126-" class="show"
-	    ><table
+	  ><details id="i:-60--126--126-" open="open"
+	    ><summary
+	      >Instances</summary
+	      ><table
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:-60--126--126-:Foo:1" class="instance expander" onclick="toggleSection('i:id:-60--126--126-:Foo:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:-60--126--126-:Foo:1"
 		      ></span
 		      > <a href="#"
 		      >Foo</a
@@ -87,8 +87,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:-60--126--126-:Foo:1" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:id:-60--126--126-:Foo:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -122,11 +124,11 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	><div class="top"
@@ -163,14 +165,14 @@
 	      ></p
 	    ></div
 	  ><div class="subs instances"
-	  ><p id="control.i:Foo" class="caption collapser" onclick="toggleSection('i:Foo')"
-	    >Instances</p
-	    ><div id="section.i:Foo" class="show"
-	    ><table
+	  ><details id="i:Foo" open="open"
+	    ><summary
+	      >Instances</summary
+	      ><table
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Foo:Foo:1" class="instance expander" onclick="toggleSection('i:ic:Foo:Foo:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Foo:Foo:1"
 		      ></span
 		      > <a href="#"
 		      >Foo</a
@@ -183,8 +185,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Foo:Foo:1" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:ic:Foo:Foo:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -206,13 +210,13 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Foo:Foo:2" class="instance expander" onclick="toggleSection('i:ic:Foo:Foo:2')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Foo:Foo:2"
 		      ></span
 		      > <a href="#"
 		      >Foo</a
@@ -227,8 +231,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Foo:Foo:2" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:ic:Foo:Foo:2"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -262,13 +268,13 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Foo:Foo:3" class="instance expander" onclick="toggleSection('i:ic:Foo:Foo:3')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Foo:Foo:3"
 		      ></span
 		      > <a href="#"
 		      >Foo</a
@@ -283,8 +289,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Foo:Foo:3" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:ic:Foo:Foo:3"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -318,13 +326,13 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Foo:Foo:4" class="instance expander" onclick="toggleSection('i:ic:Foo:Foo:4')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Foo:Foo:4"
 		      ></span
 		      > (<a href="#"
 		      >Eq</a
@@ -343,8 +351,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Foo:Foo:4" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:ic:Foo:Foo:4"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -366,13 +376,13 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Foo:Foo:5" class="instance expander" onclick="toggleSection('i:ic:Foo:Foo:5')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Foo:Foo:5"
 		      ></span
 		      > <a href="#"
 		      >Foo</a
@@ -387,8 +397,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Foo:Foo:5" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:ic:Foo:Foo:5"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -422,13 +434,13 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Foo:Foo:6" class="instance expander" onclick="toggleSection('i:ic:Foo:Foo:6')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Foo:Foo:6"
 		      ></span
 		      > <a href="#"
 		      >Foo</a
@@ -443,8 +455,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Foo:Foo:6" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:ic:Foo:Foo:6"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -466,13 +480,13 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Foo:Foo:7" class="instance expander" onclick="toggleSection('i:ic:Foo:Foo:7')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Foo:Foo:7"
 		      ></span
 		      > <a href="#"
 		      >Foo</a
@@ -487,8 +501,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Foo:Foo:7" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:ic:Foo:Foo:7"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -522,13 +538,13 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Foo:Foo:8" class="instance expander" onclick="toggleSection('i:ic:Foo:Foo:8')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Foo:Foo:8"
 		      ></span
 		      > <a href="#"
 		      >Foo</a
@@ -545,8 +561,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Foo:Foo:8" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:ic:Foo:Foo:8"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -592,11 +610,11 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	><div class="top"
@@ -643,14 +661,14 @@
 	      ></p
 	    ></div
 	  ><div class="subs instances"
-	  ><p id="control.i:Bar" class="caption collapser" onclick="toggleSection('i:Bar')"
-	    >Instances</p
-	    ><div id="section.i:Bar" class="show"
-	    ><table
+	  ><details id="i:Bar" open="open"
+	    ><summary
+	      >Instances</summary
+	      ><table
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Bar:Bar:1" class="instance expander" onclick="toggleSection('i:ic:Bar:Bar:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Bar:Bar:1"
 		      ></span
 		      > <a href="#"
 		      >Bar</a
@@ -667,8 +685,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Bar:Bar:1" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:ic:Bar:Bar:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -742,13 +762,13 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Bar:Bar:2" class="instance expander" onclick="toggleSection('i:ic:Bar:Bar:2')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Bar:Bar:2"
 		      ></span
 		      > <a href="#"
 		      >Bar</a
@@ -763,8 +783,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Bar:Bar:2" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:ic:Bar:Bar:2"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -824,13 +846,13 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Bar:Bar:3" class="instance expander" onclick="toggleSection('i:ic:Bar:Bar:3')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Bar:Bar:3"
 		      ></span
 		      > <a href="#"
 		      >Bar</a
@@ -843,8 +865,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Bar:Bar:3" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:ic:Bar:Bar:3"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -874,13 +898,13 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Bar:Bar:4" class="instance expander" onclick="toggleSection('i:ic:Bar:Bar:4')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Bar:Bar:4"
 		      ></span
 		      > <a href="#"
 		      >Foo</a
@@ -897,8 +921,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Bar:Bar:4" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:ic:Bar:Bar:4"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -958,13 +984,13 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Bar:Bar:5" class="instance expander" onclick="toggleSection('i:ic:Bar:Bar:5')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Bar:Bar:5"
 		      ></span
 		      > <a href="#"
 		      >Foo</a
@@ -983,8 +1009,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Bar:Bar:5" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:ic:Bar:Bar:5"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -1014,13 +1042,13 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Bar:Bar:6" class="instance expander" onclick="toggleSection('i:ic:Bar:Bar:6')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Bar:Bar:6"
 		      ></span
 		      > <a href="#"
 		      >Bar</a
@@ -1037,8 +1065,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Bar:Bar:6" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:ic:Bar:Bar:6"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -1112,11 +1142,11 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	><div class="top"
@@ -1167,14 +1197,14 @@
 	      ></p
 	    ></div
 	  ><div class="subs instances"
-	  ><p id="control.i:Baz" class="caption collapser" onclick="toggleSection('i:Baz')"
-	    >Instances</p
-	    ><div id="section.i:Baz" class="show"
-	    ><table
+	  ><details id="i:Baz" open="open"
+	    ><summary
+	      >Instances</summary
+	      ><table
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Baz:Baz:1" class="instance expander" onclick="toggleSection('i:ic:Baz:Baz:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Baz:Baz:1"
 		      ></span
 		      > <a href="#"
 		      >Baz</a
@@ -1187,8 +1217,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Baz:Baz:1" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:ic:Baz:Baz:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -1224,13 +1256,13 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Baz:Baz:2" class="instance expander" onclick="toggleSection('i:ic:Baz:Baz:2')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Baz:Baz:2"
 		      ></span
 		      > <a href="#"
 		      >Baz</a
@@ -1243,8 +1275,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Baz:Baz:2" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:ic:Baz:Baz:2"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -1280,13 +1314,13 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Baz:Baz:3" class="instance expander" onclick="toggleSection('i:ic:Baz:Baz:3')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Baz:Baz:3"
 		      ></span
 		      > <a href="#"
 		      >Baz</a
@@ -1299,8 +1333,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Baz:Baz:3" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:ic:Baz:Baz:3"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -1336,13 +1372,13 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Baz:Baz:4" class="instance expander" onclick="toggleSection('i:ic:Baz:Baz:4')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Baz:Baz:4"
 		      ></span
 		      > <a href="#"
 		      >Baz</a
@@ -1357,8 +1393,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Baz:Baz:4" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:ic:Baz:Baz:4"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -1406,13 +1444,13 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Baz:Baz:5" class="instance expander" onclick="toggleSection('i:ic:Baz:Baz:5')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Baz:Baz:5"
 		      ></span
 		      > <a href="#"
 		      >Baz</a
@@ -1425,8 +1463,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Baz:Baz:5" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:ic:Baz:Baz:5"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -1462,11 +1502,11 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	><div class="top"
@@ -1509,14 +1549,14 @@
 	      ></table
 	    ></div
 	  ><div class="subs instances"
-	  ><p id="control.i:Quux" class="caption collapser" onclick="toggleSection('i:Quux')"
-	    >Instances</p
-	    ><div id="section.i:Quux" class="show"
-	    ><table
+	  ><details id="i:Quux" open="open"
+	    ><summary
+	      >Instances</summary
+	      ><table
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:Quux:Foo:1" class="instance expander" onclick="toggleSection('i:id:Quux:Foo:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:Quux:Foo:1"
 		      ></span
 		      > <a href="#"
 		      >Foo</a
@@ -1531,8 +1571,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:Quux:Foo:1" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:id:Quux:Foo:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -1566,13 +1608,13 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:Quux:Bar:2" class="instance expander" onclick="toggleSection('i:id:Quux:Bar:2')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:Quux:Bar:2"
 		      ></span
 		      > <a href="#"
 		      >Bar</a
@@ -1589,8 +1631,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:Quux:Bar:2" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:id:Quux:Bar:2"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -1664,13 +1708,13 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:Quux:Baz:3" class="instance expander" onclick="toggleSection('i:id:Quux:Baz:3')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:Quux:Baz:3"
 		      ></span
 		      > <a href="#"
 		      >Baz</a
@@ -1685,8 +1729,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:Quux:Baz:3" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:id:Quux:Baz:3"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -1734,13 +1780,13 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:Quux:Thud:4" class="instance expander" onclick="toggleSection('i:id:Quux:Thud:4')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:Quux:Thud:4"
 		      ></span
 		      > <span class="keyword"
 		      >data</span
@@ -1759,8 +1805,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:Quux:Thud:4" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:id:Quux:Thud:4"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>data</span
 			> <a href="#"
@@ -1784,11 +1832,11 @@
 			    ></li
 			  ></ul
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	><div class="top"
@@ -1835,14 +1883,14 @@
 	      ></p
 	    ></div
 	  ><div class="subs instances"
-	  ><p id="control.i:Norf" class="caption collapser" onclick="toggleSection('i:Norf')"
-	    >Instances</p
-	    ><div id="section.i:Norf" class="show"
-	    ><table
+	  ><details id="i:Norf" open="open"
+	    ><summary
+	      >Instances</summary
+	      ><table
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Norf:Norf:1" class="instance expander" onclick="toggleSection('i:ic:Norf:Norf:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Norf:Norf:1"
 		      ></span
 		      > <a href="#"
 		      >Norf</a
@@ -1859,8 +1907,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Norf:Norf:1" class="inst-details hide"
-		    ><div class="subs associated-types"
+		  ><details id="i:ic:Norf:Norf:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs associated-types"
 		      ><p class="caption"
 			>Associated Types</p
 			><p class="src"
@@ -1912,13 +1962,13 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Norf:Norf:2" class="instance expander" onclick="toggleSection('i:ic:Norf:Norf:2')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Norf:Norf:2"
 		      ></span
 		      > <a href="#"
 		      >Norf</a
@@ -1931,8 +1981,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Norf:Norf:2" class="inst-details hide"
-		    ><div class="subs associated-types"
+		  ><details id="i:ic:Norf:Norf:2"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs associated-types"
 		      ><p class="caption"
 			>Associated Types</p
 			><p class="src"
@@ -1968,11 +2020,11 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	></div
-- 
cgit v1.2.3