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.

1 files changed, 74 insertions, 60 deletions

diff --git a/html-test/ref/TypeFamilies2.html b/html-test/ref/TypeFamilies2.html
index c976d9b6..84e7df36 100644
--- a/html-test/ref/TypeFamilies2.html
+++ b/html-test/ref/TypeFamilies2.html
@@ -39,28 +39,30 @@
 	>TypeFamilies2</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"
-	  ><span class="keyword"
-	    >data</span
-	    > <a href="#"
-	    >W</a
-	    ></li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >type family</span
-	    > <a href="#"
-	    >Foo</a
-	    > a</li
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
 	  ><li class="src short"
-	  ><span class="keyword"
-	    >data family</span
-	    > <a href="#"
-	    >Bar</a
-	    > a</li
-	  ></ul
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >W</a
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >type family</span
+	      > <a href="#"
+	      >Foo</a
+	      > a</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data family</span
+	      > <a href="#"
+	      >Bar</a
+	      > a</li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
@@ -79,14 +81,14 @@
 	    >Exported type</p
 	    ></div
 	  ><div class="subs instances"
-	  ><p id="control.i:W" class="caption collapser" onclick="toggleSection('i:W')"
-	    >Instances</p
-	    ><div id="section.i:W" class="show"
-	    ><table
+	  ><details id="i:W" open="open"
+	    ><summary
+	      >Instances</summary
+	      ><table
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:W:Bar:1" class="instance expander" onclick="toggleSection('i:id:W:Bar:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:W:Bar:1"
 		      ></span
 		      > <span class="keyword"
 		      >data</span
@@ -105,8 +107,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:W:Bar:1" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:id:W:Bar:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>data</span
 			> <a href="#"
@@ -116,13 +120,13 @@
 			> = <a id="v:BarX" class="def"
 			>BarX</a
 			> Z</div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:W:Foo:2" class="instance expander" onclick="toggleSection('i:id:W:Foo:2')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:W:Foo:2"
 		      ></span
 		      > <span class="keyword"
 		      >type</span
@@ -139,8 +143,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:W:Foo:2" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:id:W:Foo:2"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>type</span
 			> <a href="#"
@@ -148,11 +154,11 @@
 			> <a href="#"
 			>W</a
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	><div class="top"
@@ -169,14 +175,14 @@
 	    >Exported type family</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
@@ -193,8 +199,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="#"
@@ -202,13 +210,13 @@
 			> <a href="#"
 			>W</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
@@ -225,8 +233,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="#"
@@ -236,11 +246,11 @@
 			> = <a href="#"
 			>Y</a
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	><div class="top"
@@ -257,14 +267,14 @@
 	    >Exported data family</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:if:Bar:Bar:1" class="instance expander" onclick="toggleSection('i:if:Bar:Bar:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:if:Bar:Bar:1"
 		      ></span
 		      > <span class="keyword"
 		      >data</span
@@ -283,8 +293,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:if:Bar:Bar:1" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:if:Bar:Bar:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>data</span
 			> <a href="#"
@@ -294,13 +306,13 @@
 			> = <a id="v:BarX" class="def"
 			>BarX</a
 			> Z</div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:if:Bar:Bar:2" class="instance expander" onclick="toggleSection('i:if:Bar:Bar:2')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:if:Bar:Bar:2"
 		      ></span
 		      > <span class="keyword"
 		      >data</span
@@ -317,8 +329,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:if:Bar:Bar:2" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:if:Bar:Bar:2"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>data</span
 			> <a href="#"
@@ -326,11 +340,11 @@
 			> <a href="#"
 			>Y</a
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	></div