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/TypeFamilies.html | 618 ++++++++++++++++++++++------------------
 1 file changed, 342 insertions(+), 276 deletions(-)

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

diff --git a/html-test/ref/TypeFamilies.html b/html-test/ref/TypeFamilies.html
index df2a57c2..dcb5a92a 100644
--- a/html-test/ref/TypeFamilies.html
+++ b/html-test/ref/TypeFamilies.html
@@ -47,118 +47,120 @@
 	  ></div
 	></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"
-	  ><span class="keyword"
-	    >data</span
-	    > <a href="#"
-	    >X</a
-	    ><ul class="subs"
-	    ><li
-	      >= <a href="#"
-		>X</a
-		></li
-	      ><li
-	      >| <a href="#"
-		>XX</a
-		></li
-	      ><li
-	      >| <a href="#"
-		>XXX</a
-		></li
-	      ></ul
-	    ></li
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
 	  ><li class="src short"
-	  ><span class="keyword"
-	    >data</span
-	    > <a href="#"
-	    >Y</a
-	    ></li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >data</span
-	    > <a href="#"
-	    >Z</a
-	    ><ul class="subs"
-	    ><li
-	      >= <a href="#"
-		>ZA</a
-		></li
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >X</a
+	      ><ul class="subs"
 	      ><li
-	      >| <a href="#"
-		>ZB</a
-		></li
-	      ></ul
-	    ></li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >class</span
-	    > <a href="#"
-	    >Test</a
-	    > a</li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >type family</span
-	    > <a href="#"
-	    >Foo</a
-	    > a :: k</li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >data family</span
-	    > <a href="#"
-	    >Bat</a
-	    > (a :: k) :: <a href="#"
-	    >*</a
-	    ></li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >class</span
-	    > <a href="#"
-	    >Assoc</a
-	    > a <span class="keyword"
-	    >where</span
-	    ><ul class="subs"
-	    ><li
-	      ><span class="keyword"
-		>data</span
-		> <a href="#"
-		>AssocD</a
-		> a :: <a href="#"
-		>*</a
-		></li
+		>= <a href="#"
+		  >X</a
+		  ></li
+		><li
+		>| <a href="#"
+		  >XX</a
+		  ></li
+		><li
+		>| <a href="#"
+		  >XXX</a
+		  ></li
+		></ul
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >Y</a
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >Z</a
+	      ><ul class="subs"
 	      ><li
-	      ><span class="keyword"
-		>type</span
-		> <a href="#"
-		>AssocT</a
-		> a :: <a href="#"
-		>*</a
-		></li
-	      ></ul
-	    ></li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >type family</span
-	    > <a href="#"
-	    >Bar</a
-	    > b <span class="keyword"
-	    >where ...</span
-	    ></li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >type family</span
-	    > (a :: k) <a href="#"
-	    >&lt;&gt;</a
-	    > (b :: k) :: k</li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >class</span
-	    > (a :: k) <a href="#"
-	    >&gt;&lt;</a
-	    > (b :: k)</li
-	  ></ul
+		>= <a href="#"
+		  >ZA</a
+		  ></li
+		><li
+		>| <a href="#"
+		  >ZB</a
+		  ></li
+		></ul
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >class</span
+	      > <a href="#"
+	      >Test</a
+	      > a</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >type family</span
+	      > <a href="#"
+	      >Foo</a
+	      > a :: k</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data family</span
+	      > <a href="#"
+	      >Bat</a
+	      > (a :: k) :: <a href="#"
+	      >*</a
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >class</span
+	      > <a href="#"
+	      >Assoc</a
+	      > a <span class="keyword"
+	      >where</span
+	      ><ul class="subs"
+	      ><li
+		><span class="keyword"
+		  >data</span
+		  > <a href="#"
+		  >AssocD</a
+		  > a :: <a href="#"
+		  >*</a
+		  ></li
+		><li
+		><span class="keyword"
+		  >type</span
+		  > <a href="#"
+		  >AssocT</a
+		  > a :: <a href="#"
+		  >*</a
+		  ></li
+		></ul
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >type family</span
+	      > <a href="#"
+	      >Bar</a
+	      > b <span class="keyword"
+	      >where ...</span
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >type family</span
+	      > (a :: k) <a href="#"
+	      >&lt;&gt;</a
+	      > (b :: k) :: k</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >class</span
+	      > (a :: k) <a href="#"
+	      >&gt;&lt;</a
+	      > (b :: k)</li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
@@ -213,14 +215,14 @@
 	      ></table
 	    ></div
 	  ><div class="subs instances"
-	  ><p id="control.i:X" class="caption collapser" onclick="toggleSection('i:X')"
-	    >Instances</p
-	    ><div id="section.i:X" class="show"
-	    ><table
+	  ><details id="i:X" open="open"
+	    ><summary
+	      >Instances</summary
+	      ><table
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:X:-62--60-:1" class="instance expander" onclick="toggleSection('i:id:X:-62--60-:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:X:-62--60-:1"
 		      ></span
 		      > <a href="#"
 		      >(&gt;&lt;)</a
@@ -239,14 +241,16 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:X:-62--60-:1" class="inst-details hide"
-		    ></div
+		  ><details id="i:id:X:-62--60-:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:X:Assoc:2" class="instance expander" onclick="toggleSection('i:id:X:Assoc:2')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:X:Assoc:2"
 		      ></span
 		      > <a href="#"
 		      >Assoc</a
@@ -265,8 +269,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:X:Assoc:2" class="inst-details hide"
-		    ><div class="subs associated-types"
+		  ><details id="i:id:X:Assoc:2"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs associated-types"
 		      ><p class="caption"
 			>Associated Types</p
 			><p class="src"
@@ -298,13 +304,13 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:X:Test:3" class="instance expander" onclick="toggleSection('i:id:X:Test:3')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:X:Test:3"
 		      ></span
 		      > <a href="#"
 		      >Test</a
@@ -323,14 +329,16 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:X:Test:3" class="inst-details hide"
-		    ></div
+		  ><details id="i:id:X:Test:3"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:X:Foo:4" class="instance expander" onclick="toggleSection('i:id:X:Foo:4')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:X:Foo:4"
 		      ></span
 		      > <span class="keyword"
 		      >type</span
@@ -347,8 +355,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:X:Foo:4" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:id:X:Foo:4"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>type</span
 			> <a href="#"
@@ -358,13 +368,13 @@
 			> = <a href="#"
 			>Y</a
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:X:-60--62-:5" class="instance expander" onclick="toggleSection('i:id:X:-60--62-:5')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:X:-60--62-:5"
 		      ></span
 		      > <span class="keyword"
 		      >type</span
@@ -385,8 +395,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:X:-60--62-:5" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:id:X:-60--62-:5"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>type</span
 			> <a href="#"
@@ -400,13 +412,13 @@
 			> = <a href="#"
 			>X</a
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:X:AssocD:6" class="instance expander" onclick="toggleSection('i:id:X:AssocD:6')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:X:AssocD:6"
 		      ></span
 		      > <span class="keyword"
 		      >data</span
@@ -425,8 +437,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:X:AssocD:6" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:id:X:AssocD:6"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>data</span
 			> <a href="#"
@@ -438,13 +452,13 @@
 			> = <a id="v:AssocX" class="def"
 			>AssocX</a
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:X:AssocT:7" class="instance expander" onclick="toggleSection('i:id:X:AssocT:7')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:X:AssocT:7"
 		      ></span
 		      > <span class="keyword"
 		      >type</span
@@ -463,8 +477,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:X:AssocT:7" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:id:X:AssocT:7"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>type</span
 			> <a href="#"
@@ -480,13 +496,13 @@
 			> <a href="#"
 			>X</a
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:X:Bat:8" class="instance expander" onclick="toggleSection('i:id:X:Bat:8')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:X:Bat:8"
 		      ></span
 		      > <span class="keyword"
 		      >data</span
@@ -507,8 +523,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:X:Bat:8" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:id:X:Bat:8"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>data</span
 			> <a href="#"
@@ -544,13 +562,13 @@
 			    > }</li
 			  ></ul
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:X:Foo:9" class="instance expander" onclick="toggleSection('i:id:X:Foo:9')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:X:Foo:9"
 		      ></span
 		      > <span class="keyword"
 		      >type</span
@@ -569,8 +587,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:X:Foo:9" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:id:X:Foo:9"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>type</span
 			> <a href="#"
@@ -582,13 +602,13 @@
 			> = <a href="#"
 			>Y</a
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:X:-60--62-:10" class="instance expander" onclick="toggleSection('i:id:X:-60--62-:10')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:X:-60--62-:10"
 		      ></span
 		      > <span class="keyword"
 		      >type</span
@@ -607,8 +627,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:X:-60--62-:10" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:id:X:-60--62-:10"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>type</span
 			> <a href="#"
@@ -620,11 +642,11 @@
 			> a = <a href="#"
 			>X</a
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	><div class="top"
@@ -641,14 +663,14 @@
 	    >Doc for: data Y</p
 	    ></div
 	  ><div class="subs instances"
-	  ><p id="control.i:Y" class="caption collapser" onclick="toggleSection('i:Y')"
-	    >Instances</p
-	    ><div id="section.i:Y" class="show"
-	    ><table
+	  ><details id="i:Y" open="open"
+	    ><summary
+	      >Instances</summary
+	      ><table
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:Y:Assoc:1" class="instance expander" onclick="toggleSection('i:id:Y:Assoc:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:Y:Assoc:1"
 		      ></span
 		      > <a href="#"
 		      >Assoc</a
@@ -667,8 +689,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:Y:Assoc:1" class="inst-details hide"
-		    ><div class="subs associated-types"
+		  ><details id="i:id:Y:Assoc:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs associated-types"
 		      ><p class="caption"
 			>Associated Types</p
 			><p class="src"
@@ -700,13 +724,13 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:Y:Test:2" class="instance expander" onclick="toggleSection('i:id:Y:Test:2')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:Y:Test:2"
 		      ></span
 		      > <a href="#"
 		      >Test</a
@@ -725,14 +749,16 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:Y:Test:2" class="inst-details hide"
-		    ></div
+		  ><details id="i:id:Y:Test:2"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:Y:Bar:3" class="instance expander" onclick="toggleSection('i:id:Y:Bar:3')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:Y:Bar:3"
 		      ></span
 		      > <span class="keyword"
 		      >data</span
@@ -749,8 +775,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:Y:Bar:3" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:id:Y:Bar:3"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>data</span
 			> <a href="#"
@@ -758,13 +786,13 @@
 			> <a href="#"
 			>Y</a
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:Y:AssocD:4" class="instance expander" onclick="toggleSection('i:id:Y:AssocD:4')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:Y:AssocD:4"
 		      ></span
 		      > <span class="keyword"
 		      >data</span
@@ -783,8 +811,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:Y:AssocD:4" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:id:Y:AssocD:4"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>data</span
 			> <a href="#"
@@ -796,13 +826,13 @@
 			> = <a id="v:AssocY" class="def"
 			>AssocY</a
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:Y:AssocT:5" class="instance expander" onclick="toggleSection('i:id:Y:AssocT:5')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:Y:AssocT:5"
 		      ></span
 		      > <span class="keyword"
 		      >type</span
@@ -821,8 +851,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:Y:AssocT:5" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:id:Y:AssocT:5"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>type</span
 			> <a href="#"
@@ -838,13 +870,13 @@
 			> <a href="#"
 			>Y</a
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:Y:Bat:6" class="instance expander" onclick="toggleSection('i:id:Y:Bat:6')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:Y:Bat:6"
 		      ></span
 		      > <span class="keyword"
 		      >data</span
@@ -865,8 +897,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:Y:Bat:6" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:id:Y:Bat:6"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>data</span
 			> <a href="#"
@@ -880,13 +914,13 @@
 			> <a href="#"
 			>Y</a
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:Y:Foo:7" class="instance expander" onclick="toggleSection('i:id:Y:Foo:7')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:Y:Foo:7"
 		      ></span
 		      > <span class="keyword"
 		      >type</span
@@ -905,8 +939,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:Y:Foo:7" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:id:Y:Foo:7"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>type</span
 			> <a href="#"
@@ -918,13 +954,13 @@
 			> = <a href="#"
 			>X</a
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:Y:-60--62-:8" class="instance expander" onclick="toggleSection('i:id:Y:-60--62-:8')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:Y:-60--62-:8"
 		      ></span
 		      > <span class="keyword"
 		      >type</span
@@ -943,8 +979,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:Y:-60--62-:8" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:id:Y:-60--62-:8"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>type</span
 			> <a href="#"
@@ -954,11 +992,11 @@
 			> <a href="#"
 			>Y</a
 			> a = a</div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	><div class="top"
@@ -997,14 +1035,14 @@
 	      ></table
 	    ></div
 	  ><div class="subs instances"
-	  ><p id="control.i:Z" class="caption collapser" onclick="toggleSection('i:Z')"
-	    >Instances</p
-	    ><div id="section.i:Z" class="show"
-	    ><table
+	  ><details id="i:Z" open="open"
+	    ><summary
+	      >Instances</summary
+	      ><table
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:Z:Bat:1" class="instance expander" onclick="toggleSection('i:id:Z:Bat:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:Z:Bat:1"
 		      ></span
 		      > <span class="keyword"
 		      >data</span
@@ -1023,8 +1061,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:Z:Bat:1" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:id:Z:Bat:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>data</span
 			> <a href="#"
@@ -1056,11 +1096,11 @@
 			    ></li
 			  ></ul
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	><div class="top"
@@ -1077,14 +1117,14 @@
 	    >Doc for: class Test a</p
 	    ></div
 	  ><div class="subs instances"
-	  ><p id="control.i:Test" class="caption collapser" onclick="toggleSection('i:Test')"
-	    >Instances</p
-	    ><div id="section.i:Test" class="show"
-	    ><table
+	  ><details id="i:Test" open="open"
+	    ><summary
+	      >Instances</summary
+	      ><table
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Test:Test:1" class="instance expander" onclick="toggleSection('i:ic:Test:Test:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Test:Test:1"
 		      ></span
 		      > <a href="#"
 		      >Test</a
@@ -1103,14 +1143,16 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Test:Test:1" class="inst-details hide"
-		    ></div
+		  ><details id="i:ic:Test:Test:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Test:Test:2" class="instance expander" onclick="toggleSection('i:ic:Test:Test:2')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Test:Test:2"
 		      ></span
 		      > <a href="#"
 		      >Test</a
@@ -1129,12 +1171,14 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Test:Test:2" class="inst-details hide"
-		    ></div
+		  ><details id="i:ic:Test:Test:2"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	><div class="top"
@@ -1151,14 +1195,14 @@
 	    >Doc for: type family Foo a</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:if:Foo:Foo:1" class="instance expander" onclick="toggleSection('i:if:Foo:Foo:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:if:Foo:Foo:1"
 		      ></span
 		      > <span class="keyword"
 		      >type</span
@@ -1177,8 +1221,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:if:Foo:Foo:1" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:if:Foo:Foo:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>type</span
 			> <a href="#"
@@ -1190,13 +1236,13 @@
 			> = <a href="#"
 			>X</a
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:if:Foo:Foo:2" class="instance expander" onclick="toggleSection('i:if:Foo:Foo:2')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:if:Foo:Foo:2"
 		      ></span
 		      > <span class="keyword"
 		      >type</span
@@ -1215,8 +1261,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:if:Foo:Foo:2" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:if:Foo:Foo:2"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>type</span
 			> <a href="#"
@@ -1228,11 +1276,11 @@
 			> = <a href="#"
 			>Y</a
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	><div class="top"
@@ -1251,14 +1299,14 @@
 	    >Doc for: data family Bat a</p
 	    ></div
 	  ><div class="subs instances"
-	  ><p id="control.i:Bat" class="caption collapser" onclick="toggleSection('i:Bat')"
-	    >Instances</p
-	    ><div id="section.i:Bat" class="show"
-	    ><table
+	  ><details id="i:Bat" open="open"
+	    ><summary
+	      >Instances</summary
+	      ><table
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:if:Bat:Bat:1" class="instance expander" onclick="toggleSection('i:if:Bat:Bat:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:if:Bat:Bat:1"
 		      ></span
 		      > <span class="keyword"
 		      >data</span
@@ -1277,8 +1325,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:if:Bat:Bat:1" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:if:Bat:Bat:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>data</span
 			> <a href="#"
@@ -1310,13 +1360,13 @@
 			    ></li
 			  ></ul
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:if:Bat:Bat:2" class="instance expander" onclick="toggleSection('i:if:Bat:Bat:2')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:if:Bat:Bat:2"
 		      ></span
 		      > <span class="keyword"
 		      >data</span
@@ -1337,8 +1387,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:if:Bat:Bat:2" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:if:Bat:Bat:2"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>data</span
 			> <a href="#"
@@ -1352,13 +1404,13 @@
 			> <a href="#"
 			>Y</a
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:if:Bat:Bat:3" class="instance expander" onclick="toggleSection('i:if:Bat:Bat:3')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:if:Bat:Bat:3"
 		      ></span
 		      > <span class="keyword"
 		      >data</span
@@ -1379,8 +1431,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:if:Bat:Bat:3" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:if:Bat:Bat:3"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>data</span
 			> <a href="#"
@@ -1416,11 +1470,11 @@
 			    > }</li
 			  ></ul
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	><div class="top"
@@ -1469,14 +1523,14 @@
 	      ></div
 	    ></div
 	  ><div class="subs instances"
-	  ><p id="control.i:Assoc" class="caption collapser" onclick="toggleSection('i:Assoc')"
-	    >Instances</p
-	    ><div id="section.i:Assoc" class="show"
-	    ><table
+	  ><details id="i:Assoc" open="open"
+	    ><summary
+	      >Instances</summary
+	      ><table
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Assoc:Assoc:1" class="instance expander" onclick="toggleSection('i:ic:Assoc:Assoc:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Assoc:Assoc:1"
 		      ></span
 		      > <a href="#"
 		      >Assoc</a
@@ -1495,8 +1549,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Assoc:Assoc:1" class="inst-details hide"
-		    ><div class="subs associated-types"
+		  ><details id="i:ic:Assoc:Assoc:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs associated-types"
 		      ><p class="caption"
 			>Associated Types</p
 			><p class="src"
@@ -1528,13 +1584,13 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Assoc:Assoc:2" class="instance expander" onclick="toggleSection('i:ic:Assoc:Assoc:2')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Assoc:Assoc:2"
 		      ></span
 		      > <a href="#"
 		      >Assoc</a
@@ -1553,8 +1609,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Assoc:Assoc:2" class="inst-details hide"
-		    ><div class="subs associated-types"
+		  ><details id="i:ic:Assoc:Assoc:2"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs associated-types"
 		      ><p class="caption"
 			>Associated Types</p
 			><p class="src"
@@ -1586,11 +1644,11 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	><div class="top"
@@ -1647,14 +1705,14 @@
 	    >#</a
 	    ></p
 	  ><div class="subs instances"
-	  ><p id="control.i:-60--62-" class="caption collapser" onclick="toggleSection('i:-60--62-')"
-	    >Instances</p
-	    ><div id="section.i:-60--62-" class="show"
-	    ><table
+	  ><details id="i:-60--62-" open="open"
+	    ><summary
+	      >Instances</summary
+	      ><table
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:if:-60--62-:-60--62-:1" class="instance expander" onclick="toggleSection('i:if:-60--62-:-60--62-:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:if:-60--62-:-60--62-:1"
 		      ></span
 		      > <span class="keyword"
 		      >type</span
@@ -1675,8 +1733,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:if:-60--62-:-60--62-:1" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:if:-60--62-:-60--62-:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>type</span
 			> <a href="#"
@@ -1690,13 +1750,13 @@
 			> = <a href="#"
 			>X</a
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:if:-60--62-:-60--62-:2" class="instance expander" onclick="toggleSection('i:if:-60--62-:-60--62-:2')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:if:-60--62-:-60--62-:2"
 		      ></span
 		      > <span class="keyword"
 		      >type</span
@@ -1715,8 +1775,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:if:-60--62-:-60--62-:2" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:if:-60--62-:-60--62-:2"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>type</span
 			> <a href="#"
@@ -1726,13 +1788,13 @@
 			> <a href="#"
 			>Y</a
 			> a = a</div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:if:-60--62-:-60--62-:3" class="instance expander" onclick="toggleSection('i:if:-60--62-:-60--62-:3')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:if:-60--62-:-60--62-:3"
 		      ></span
 		      > <span class="keyword"
 		      >type</span
@@ -1751,8 +1813,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:if:-60--62-:-60--62-:3" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:if:-60--62-:-60--62-:3"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>type</span
 			> <a href="#"
@@ -1764,11 +1828,11 @@
 			> a = <a href="#"
 			>X</a
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	><div class="top"
@@ -1781,14 +1845,14 @@
 	    >#</a
 	    ></p
 	  ><div class="subs instances"
-	  ><p id="control.i:-62--60-" class="caption collapser" onclick="toggleSection('i:-62--60-')"
-	    >Instances</p
-	    ><div id="section.i:-62--60-" class="show"
-	    ><table
+	  ><details id="i:-62--60-" open="open"
+	    ><summary
+	      >Instances</summary
+	      ><table
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:-62--60-:-62--60-:1" class="instance expander" onclick="toggleSection('i:ic:-62--60-:-62--60-:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:-62--60-:-62--60-:1"
 		      ></span
 		      > <a href="#"
 		      >(&gt;&lt;)</a
@@ -1807,12 +1871,14 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:-62--60-:-62--60-:1" class="inst-details hide"
-		    ></div
+		  ><details id="i:ic:-62--60-:-62--60-:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	></div
-- 
cgit v1.2.3