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/A.html                             |  76 +-
 html-test/ref/B.html                             |  56 +-
 html-test/ref/Bold.html                          |  18 +-
 html-test/ref/Bug1.html                          |  26 +-
 html-test/ref/Bug201.html                        |  24 +-
 html-test/ref/Bug253.html                        |  18 +-
 html-test/ref/Bug26.html                         |  62 +-
 html-test/ref/Bug294.html                        |  50 +-
 html-test/ref/Bug298.html                        |  48 +-
 html-test/ref/Bug3.html                          |  22 +-
 html-test/ref/Bug308.html                        |  24 +-
 html-test/ref/Bug308CrossModule.html             |  18 +-
 html-test/ref/Bug310.html                        |  38 +-
 html-test/ref/Bug313.html                        |  24 +-
 html-test/ref/Bug335.html                        |  44 +-
 html-test/ref/Bug387.html                        |  32 +-
 html-test/ref/Bug4.html                          |  22 +-
 html-test/ref/Bug6.html                          | 146 ++--
 html-test/ref/Bug613.html                        |  94 ++-
 html-test/ref/Bug7.html                          |  72 +-
 html-test/ref/BugDeprecated.html                 |  80 +-
 html-test/ref/BugExportHeadings.html             |  80 +-
 html-test/ref/BundledPatterns.html               | 150 ++--
 html-test/ref/BundledPatterns2.html              | 154 ++--
 html-test/ref/DeprecatedClass.html               |  46 +-
 html-test/ref/DeprecatedData.html                |  70 +-
 html-test/ref/DeprecatedFunction.html            |  32 +-
 html-test/ref/DeprecatedFunction2.html           |  22 +-
 html-test/ref/DeprecatedFunction3.html           |  22 +-
 html-test/ref/DeprecatedNewtype.html             |  48 +-
 html-test/ref/DeprecatedReExport.html            |  22 +-
 html-test/ref/DeprecatedRecord.html              |  52 +-
 html-test/ref/DeprecatedTypeFamily.html          |  48 +-
 html-test/ref/DeprecatedTypeSynonym.html         |  40 +-
 html-test/ref/Examples.html                      |  26 +-
 html-test/ref/Extensions.html                    |  18 +-
 html-test/ref/GADTRecords.html                   |  92 +--
 html-test/ref/Hash.html                          | 146 ++--
 html-test/ref/HiddenInstances.html               |  86 +-
 html-test/ref/HiddenInstancesB.html              |  68 +-
 html-test/ref/Hyperlinks.html                    |  22 +-
 html-test/ref/IgnoreExports.html                 |  32 +-
 html-test/ref/Instances.html                     | 320 ++++----
 html-test/ref/Math.html                          |  22 +-
 html-test/ref/NamedDoc.html                      |  10 +-
 html-test/ref/Nesting.html                       |  72 +-
 html-test/ref/NoLayout.html                      |  22 +-
 html-test/ref/NonGreedy.html                     |  18 +-
 html-test/ref/Operators.html                     | 212 ++---
 html-test/ref/OrphanInstances.html               |  22 +-
 html-test/ref/PR643.html                         |  18 +-
 html-test/ref/PR643_1.html                       |  18 +-
 html-test/ref/PatternSyns.html                   | 200 ++---
 html-test/ref/Properties.html                    |  26 +-
 html-test/ref/QuasiExpr.html                     |  40 +-
 html-test/ref/SpuriousSuperclassConstraints.html |  30 +-
 html-test/ref/Test.html                          | 952 ++++++++++++-----------
 html-test/ref/Threaded.html                      |  22 +-
 html-test/ref/Threaded_TH.html                   |  18 +-
 html-test/ref/Ticket112.html                     |  18 +-
 html-test/ref/Ticket75.html                      |  36 +-
 html-test/ref/TitledPicture.html                 |  32 +-
 html-test/ref/TypeFamilies.html                  | 618 ++++++++-------
 html-test/ref/TypeFamilies2.html                 | 134 ++--
 html-test/ref/Unicode.html                       |  22 +-
 65 files changed, 2728 insertions(+), 2424 deletions(-)

(limited to 'html-test')

diff --git a/html-test/ref/A.html b/html-test/ref/A.html
index 094455f8..1fbfb371 100644
--- a/html-test/ref/A.html
+++ b/html-test/ref/A.html
@@ -39,44 +39,46 @@
 	>A</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="#"
-	    >A</a
-	    > = <a href="#"
-	    >A</a
-	    ></li
-	  ><li class="src short"
-	  ><a href="#"
-	    >other</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
-	  ><li class="src short"
-	  ><a href="#"
-	    >test2</a
-	    > :: <a href="#"
-	    >Bool</a
-	    ></li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >data</span
-	    > <a href="#"
-	    >X</a
-	    > = <a href="#"
-	    >X</a
-	    ></li
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
 	  ><li class="src short"
-	  ><a href="#"
-	    >reExport</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
-	  ></ul
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >A</a
+	      > = <a href="#"
+	      >A</a
+	      ></li
+	    ><li class="src short"
+	    ><a href="#"
+	      >other</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ><li class="src short"
+	    ><a href="#"
+	      >test2</a
+	      > :: <a href="#"
+	      >Bool</a
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >X</a
+	      > = <a href="#"
+	      >X</a
+	      ></li
+	    ><li class="src short"
+	    ><a href="#"
+	      >reExport</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/B.html b/html-test/ref/B.html
index 577c7b48..12d8e907 100644
--- a/html-test/ref/B.html
+++ b/html-test/ref/B.html
@@ -39,34 +39,36 @@
 	>B</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"
-	  >module <a href="#"
-	    >A</a
-	    ></li
-	  ><li class="src short"
-	  ><a href="#"
-	    >test</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
-	  ><li class="src short"
-	  ><a href="#"
-	    >reExport</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></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="#"
-	    >X</a
-	    > = <a href="#"
-	    >X</a
-	    ></li
-	  ></ul
+	    >module <a href="#"
+	      >A</a
+	      ></li
+	    ><li class="src short"
+	    ><a href="#"
+	      >test</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ><li class="src short"
+	    ><a href="#"
+	      >reExport</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >X</a
+	      > = <a href="#"
+	      >X</a
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/Bold.html b/html-test/ref/Bold.html
index 305682fe..112d7aca 100644
--- a/html-test/ref/Bold.html
+++ b/html-test/ref/Bold.html
@@ -39,14 +39,16 @@
 	>Bold</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="#"
-	    >foo</a
-	    > :: a</li
-	  ></ul
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
+	  ><li class="src short"
+	    ><a href="#"
+	      >foo</a
+	      > :: a</li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/Bug1.html b/html-test/ref/Bug1.html
index 053c0b8e..e6ee486b 100644
--- a/html-test/ref/Bug1.html
+++ b/html-test/ref/Bug1.html
@@ -39,18 +39,20 @@
 	>Bug1</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="#"
-	    >T</a
-	    > = <a href="#"
-	    >T</a
-	    ></li
-	  ></ul
+      ><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="#"
+	      >T</a
+	      > = <a href="#"
+	      >T</a
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/Bug201.html b/html-test/ref/Bug201.html
index 6902a8b9..288a9499 100644
--- a/html-test/ref/Bug201.html
+++ b/html-test/ref/Bug201.html
@@ -39,18 +39,20 @@
 	>Bug201</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
diff --git a/html-test/ref/Bug253.html b/html-test/ref/Bug253.html
index a8d232d4..178d70fe 100644
--- a/html-test/ref/Bug253.html
+++ b/html-test/ref/Bug253.html
@@ -55,14 +55,16 @@
 	  ></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"
-	  ><a href="#"
-	    >foo</a
-	    > :: ()</li
-	  ></ul
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
+	  ><li class="src short"
+	    ><a href="#"
+	      >foo</a
+	      > :: ()</li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/Bug26.html b/html-test/ref/Bug26.html
index 5dc4bc83..376c2ce6 100644
--- a/html-test/ref/Bug26.html
+++ b/html-test/ref/Bug26.html
@@ -51,28 +51,30 @@
 	  ></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"
-	  ><a href="#"
-	    >f</a
-	    > :: ()</li
-	  ><li class="src short"
-	  ><a href="#"
-	    >g</a
-	    > :: ()</li
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
 	  ><li class="src short"
-	  ><span class="keyword"
-	    >class</span
-	    > <a href="#"
-	    >C</a
-	    > a <span class="keyword"
-	    >where</span
-	    ><ul class="subs"
+	    ><a href="#"
+	      >f</a
+	      > :: ()</li
+	    ><li class="src short"
+	    ><a href="#"
+	      >g</a
+	      > :: ()</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >class</span
+	      > <a href="#"
+	      >C</a
+	      > a <span class="keyword"
+	      >where</span
+	      ><ul class="subs"
+	      ></ul
+	      ></li
 	    ></ul
-	    ></li
-	  ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
@@ -149,14 +151,14 @@
 	      ></div
 	    ></div
 	  ><div class="subs instances"
-	  ><p id="control.i:C" class="caption collapser" onclick="toggleSection('i:C')"
-	    >Instances</p
-	    ><div id="section.i:C" class="show"
-	    ><table
+	  ><details id="i:C" open="open"
+	    ><summary
+	      >Instances</summary
+	      ><table
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:C:C:1" class="instance expander" onclick="toggleSection('i:ic:C:C:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:C:C:1"
 		      ></span
 		      > <a href="#"
 		      >C</a
@@ -175,8 +177,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:C:C:1" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:ic:C:C:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -186,11 +190,11 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	></div
diff --git a/html-test/ref/Bug294.html b/html-test/ref/Bug294.html
index d08b69a9..87a03731 100644
--- a/html-test/ref/Bug294.html
+++ b/html-test/ref/Bug294.html
@@ -51,14 +51,14 @@
 	    >#</a
 	    ></p
 	  ><div class="subs instances"
-	  ><p id="control.i:A" class="caption collapser" onclick="toggleSection('i:A')"
-	    >Instances</p
-	    ><div id="section.i:A" class="show"
-	    ><table
+	  ><details id="i:A" open="open"
+	    ><summary
+	      >Instances</summary
+	      ><table
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:A:DP:1" class="instance expander" onclick="toggleSection('i:id:A:DP:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:A:DP:1"
 		      ></span
 		      > <span class="keyword"
 		      >data</span
@@ -75,8 +75,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:A:DP:1" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:id:A:DP:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>data</span
 			> <a href="#"
@@ -88,13 +90,13 @@
 			> <a href="#"
 			>A</a
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:A:TP:2" class="instance expander" onclick="toggleSection('i:id:A:TP:2')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:A:TP:2"
 		      ></span
 		      > <span class="keyword"
 		      >data</span
@@ -109,8 +111,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:A:TP:2" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:id:A:TP:2"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>data</span
 			> TP <a href="#"
@@ -120,11 +124,11 @@
 			> <a href="#"
 			>A</a
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	><div class="top"
@@ -175,14 +179,14 @@
 	    >#</a
 	    ></p
 	  ><div class="subs instances"
-	  ><p id="control.i:DP" class="caption collapser" onclick="toggleSection('i:DP')"
-	    >Instances</p
-	    ><div id="section.i:DP" class="show"
-	    ><table
+	  ><details id="i:DP" open="open"
+	    ><summary
+	      >Instances</summary
+	      ><table
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:if:DP:DP:1" class="instance expander" onclick="toggleSection('i:if:DP:DP:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:if:DP:DP:1"
 		      ></span
 		      > <span class="keyword"
 		      >data</span
@@ -199,8 +203,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:if:DP:DP:1" class="inst-details hide"
-		    ><div class="src"
+		  ><details id="i:if:DP:DP:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="src"
 		      ><span class="keyword"
 			>data</span
 			> <a href="#"
@@ -212,11 +218,11 @@
 			> <a href="#"
 			>A</a
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	></div
diff --git a/html-test/ref/Bug298.html b/html-test/ref/Bug298.html
index efee6ce3..532d40c5 100644
--- a/html-test/ref/Bug298.html
+++ b/html-test/ref/Bug298.html
@@ -39,30 +39,32 @@
 	>Bug298</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="#"
-	    >(&lt;^&gt;)</a
-	    > :: (a -&gt; a) -&gt; a -&gt; a</li
-	  ><li class="src short"
-	  ><a href="#"
-	    >(&lt;^)</a
-	    > :: a -&gt; a -&gt; a</li
-	  ><li class="src short"
-	  ><a href="#"
-	    >(^&gt;)</a
-	    > :: a -&gt; a -&gt; a</li
-	  ><li class="src short"
-	  ><a href="#"
-	    >(&#8902;^)</a
-	    > :: a -&gt; a -&gt; a</li
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
 	  ><li class="src short"
-	  ><a href="#"
-	    >f</a
-	    > :: ()</li
-	  ></ul
+	    ><a href="#"
+	      >(&lt;^&gt;)</a
+	      > :: (a -&gt; a) -&gt; a -&gt; a</li
+	    ><li class="src short"
+	    ><a href="#"
+	      >(&lt;^)</a
+	      > :: a -&gt; a -&gt; a</li
+	    ><li class="src short"
+	    ><a href="#"
+	      >(^&gt;)</a
+	      > :: a -&gt; a -&gt; a</li
+	    ><li class="src short"
+	    ><a href="#"
+	      >(&#8902;^)</a
+	      > :: a -&gt; a -&gt; a</li
+	    ><li class="src short"
+	    ><a href="#"
+	      >f</a
+	      > :: ()</li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/Bug3.html b/html-test/ref/Bug3.html
index 7cb1f431..80d01cfe 100644
--- a/html-test/ref/Bug3.html
+++ b/html-test/ref/Bug3.html
@@ -39,16 +39,18 @@
 	>Bug3</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="#"
-	    >foo</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
-	  ></ul
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
+	  ><li class="src short"
+	    ><a href="#"
+	      >foo</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/Bug308.html b/html-test/ref/Bug308.html
index 54343aa6..b2d88452 100644
--- a/html-test/ref/Bug308.html
+++ b/html-test/ref/Bug308.html
@@ -39,18 +39,20 @@
 	>Bug308</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
diff --git a/html-test/ref/Bug308CrossModule.html b/html-test/ref/Bug308CrossModule.html
index 9c9a2dec..acd10424 100644
--- a/html-test/ref/Bug308CrossModule.html
+++ b/html-test/ref/Bug308CrossModule.html
@@ -39,14 +39,16 @@
 	>Bug308CrossModule</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="#"
-	    >h</a
-	    > :: ()</li
-	  ></ul
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
+	  ><li class="src short"
+	    ><a href="#"
+	      >h</a
+	      > :: ()</li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/Bug310.html b/html-test/ref/Bug310.html
index 93734800..50ba8cfd 100644
--- a/html-test/ref/Bug310.html
+++ b/html-test/ref/Bug310.html
@@ -39,24 +39,26 @@
 	>Bug310</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"
-	    >type family</span
-	    > (a :: <a href="#"
-	    >Nat</a
-	    >) <a href="#"
-	    >+</a
-	    > (b :: <a href="#"
-	    >Nat</a
-	    >) :: <a href="#"
-	    >Nat</a
-	    > <span class="keyword"
-	    >where ...</span
-	    ></li
-	  ></ul
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
+	  ><li class="src short"
+	    ><span class="keyword"
+	      >type family</span
+	      > (a :: <a href="#"
+	      >Nat</a
+	      >) <a href="#"
+	      >+</a
+	      > (b :: <a href="#"
+	      >Nat</a
+	      >) :: <a href="#"
+	      >Nat</a
+	      > <span class="keyword"
+	      >where ...</span
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/Bug313.html b/html-test/ref/Bug313.html
index 9afe11eb..17a39600 100644
--- a/html-test/ref/Bug313.html
+++ b/html-test/ref/Bug313.html
@@ -52,18 +52,20 @@
 	  ></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"
-	  ><a href="#"
-	    >a</a
-	    > :: a</li
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
 	  ><li class="src short"
-	  ><a href="#"
-	    >b</a
-	    > :: a</li
-	  ></ul
+	    ><a href="#"
+	      >a</a
+	      > :: a</li
+	    ><li class="src short"
+	    ><a href="#"
+	      >b</a
+	      > :: a</li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
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
diff --git a/html-test/ref/Bug387.html b/html-test/ref/Bug387.html
index e7ecdf62..23faa420 100644
--- a/html-test/ref/Bug387.html
+++ b/html-test/ref/Bug387.html
@@ -53,22 +53,24 @@
 	  ></ul
 	></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="#"
-	    >test1</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
 	  ><li class="src short"
-	  ><a href="#"
-	    >test2</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
-	  ></ul
+	    ><a href="#"
+	      >test1</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ><li class="src short"
+	    ><a href="#"
+	      >test2</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1 id="g:1"
diff --git a/html-test/ref/Bug4.html b/html-test/ref/Bug4.html
index 94d3fdb2..40d9ee7b 100644
--- a/html-test/ref/Bug4.html
+++ b/html-test/ref/Bug4.html
@@ -39,16 +39,18 @@
 	>Bug4</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="#"
-	    >foo</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
-	  ></ul
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
+	  ><li class="src short"
+	    ><a href="#"
+	      >foo</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/Bug6.html b/html-test/ref/Bug6.html
index 5cad0cf1..9dc093cd 100644
--- a/html-test/ref/Bug6.html
+++ b/html-test/ref/Bug6.html
@@ -47,80 +47,82 @@
 	  ></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="#"
-	    >A</a
-	    > = <a href="#"
-	    >A</a
-	    > <a href="#"
-	    >Int</a
-	    ></li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >data</span
-	    > <a href="#"
-	    >B</a
-	    > = <a href="#"
-	    >B</a
-	    > {<ul class="subs"
-	    ><li
-	      ><a href="#"
-		>b</a
-		> :: <a href="#"
-		>Int</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="#"
-	    >C</a
-	    > = <a href="#"
-	    >C</a
-	    > {<ul class="subs"
-	    ><li
-	      ><a href="#"
-		>c1</a
-		> :: <a href="#"
-		>Int</a
-		></li
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >A</a
+	      > = <a href="#"
+	      >A</a
+	      > <a href="#"
+	      >Int</a
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >B</a
+	      > = <a href="#"
+	      >B</a
+	      > {<ul class="subs"
 	      ><li
-	      ><a href="#"
-		>c2</a
-		> :: <a href="#"
-		>Int</a
-		></li
-	      ></ul
-	    >}</li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >data</span
-	    > <a href="#"
-	    >D</a
-	    > = <a href="#"
-	    >D</a
-	    > <a href="#"
-	    >Int</a
-	    > <a href="#"
-	    >Int</a
-	    ></li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >newtype</span
-	    > <a href="#"
-	    >E</a
-	    > = <a href="#"
-	    >E</a
-	    > <a href="#"
-	    >Int</a
-	    ></li
-	  ></ul
+		><a href="#"
+		  >b</a
+		  > :: <a href="#"
+		  >Int</a
+		  ></li
+		></ul
+	      >}</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >C</a
+	      > = <a href="#"
+	      >C</a
+	      > {<ul class="subs"
+	      ><li
+		><a href="#"
+		  >c1</a
+		  > :: <a href="#"
+		  >Int</a
+		  ></li
+		><li
+		><a href="#"
+		  >c2</a
+		  > :: <a href="#"
+		  >Int</a
+		  ></li
+		></ul
+	      >}</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >D</a
+	      > = <a href="#"
+	      >D</a
+	      > <a href="#"
+	      >Int</a
+	      > <a href="#"
+	      >Int</a
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >newtype</span
+	      > <a href="#"
+	      >E</a
+	      > = <a href="#"
+	      >E</a
+	      > <a href="#"
+	      >Int</a
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/Bug613.html b/html-test/ref/Bug613.html
index 45bf7bc4..765f18e1 100644
--- a/html-test/ref/Bug613.html
+++ b/html-test/ref/Bug613.html
@@ -39,28 +39,30 @@
 	>Bug613</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"
-	    >class</span
-	    > <a href="#"
-	    >Functor</a
-	    > f <span class="keyword"
-	    >where</span
-	    ><ul class="subs"
-	    ></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="#"
-	    >ThreeVars</a
-	    > a0 a b = <a href="#"
-	    >ThreeVars</a
-	    > a b</li
-	  ></ul
+	    ><span class="keyword"
+	      >class</span
+	      > <a href="#"
+	      >Functor</a
+	      > f <span class="keyword"
+	      >where</span
+	      ><ul class="subs"
+	      ></ul
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >ThreeVars</a
+	      > a0 a b = <a href="#"
+	      >ThreeVars</a
+	      > a b</li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
@@ -95,14 +97,14 @@
 	      ></p
 	    ></div
 	  ><div class="subs instances"
-	  ><p id="control.i:Functor" class="caption collapser" onclick="toggleSection('i:Functor')"
-	    >Instances</p
-	    ><div id="section.i:Functor" class="show"
-	    ><table
+	  ><details id="i:Functor" open="open"
+	    ><summary
+	      >Instances</summary
+	      ><table
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Functor:Functor:1" class="instance expander" onclick="toggleSection('i:ic:Functor:Functor:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Functor:Functor:1"
 		      ></span
 		      > <a href="#"
 		      >Functor</a
@@ -117,8 +119,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Functor:Functor:1" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:ic:Functor:Functor:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -132,13 +136,13 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Functor:Functor:2" class="instance expander" onclick="toggleSection('i:ic:Functor:Functor:2')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Functor:Functor:2"
 		      ></span
 		      > <a href="#"
 		      >Functor</a
@@ -153,8 +157,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Functor:Functor:2" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:ic:Functor:Functor:2"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -168,11 +174,11 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	><div class="top"
@@ -203,14 +209,14 @@
 	      ></table
 	    ></div
 	  ><div class="subs instances"
-	  ><p id="control.i:ThreeVars" class="caption collapser" onclick="toggleSection('i:ThreeVars')"
-	    >Instances</p
-	    ><div id="section.i:ThreeVars" class="show"
-	    ><table
+	  ><details id="i:ThreeVars" open="open"
+	    ><summary
+	      >Instances</summary
+	      ><table
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:ThreeVars:Functor:1" class="instance expander" onclick="toggleSection('i:id:ThreeVars:Functor:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:ThreeVars:Functor:1"
 		      ></span
 		      > <a href="#"
 		      >Functor</a
@@ -225,8 +231,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:ThreeVars:Functor:1" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:id:ThreeVars:Functor:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -240,11 +248,11 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	></div
diff --git a/html-test/ref/Bug7.html b/html-test/ref/Bug7.html
index 862002a0..ba1a4e26 100644
--- a/html-test/ref/Bug7.html
+++ b/html-test/ref/Bug7.html
@@ -48,24 +48,26 @@
 	  ></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="#"
-	    >Foo</a
-	    > = <a href="#"
-	    >Foo</a
-	    ></li
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
 	  ><li class="src short"
-	  ><span class="keyword"
-	    >class</span
-	    > <a href="#"
-	    >Bar</a
-	    > x y</li
-	  ></ul
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >Foo</a
+	      > = <a href="#"
+	      >Foo</a
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >class</span
+	      > <a href="#"
+	      >Bar</a
+	      > x y</li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
@@ -98,14 +100,14 @@
 	      ></table
 	    ></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:id:Foo:Bar:1" class="instance expander" onclick="toggleSection('i:id:Foo:Bar:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:Foo:Bar:1"
 		      ></span
 		      > <a href="#"
 		      >Bar</a
@@ -124,12 +126,14 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:Foo:Bar:1" class="inst-details hide"
-		    ></div
+		  ><details id="i:id:Foo:Bar:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	><div class="top"
@@ -146,14 +150,14 @@
 	    >The Bar class</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
@@ -172,12 +176,14 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Bar:Bar:1" class="inst-details hide"
-		    ></div
+		  ><details id="i:ic:Bar:Bar:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	></div
diff --git a/html-test/ref/BugDeprecated.html b/html-test/ref/BugDeprecated.html
index 629224e4..ca801201 100644
--- a/html-test/ref/BugDeprecated.html
+++ b/html-test/ref/BugDeprecated.html
@@ -39,46 +39,48 @@
 	>BugDeprecated</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="#"
-	    >foo</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
-	  ><li class="src short"
-	  ><a href="#"
-	    >bar</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
-	  ><li class="src short"
-	  ><a href="#"
-	    >baz</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
 	  ><li class="src short"
-	  ><a href="#"
-	    >one</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
-	  ><li class="src short"
-	  ><a href="#"
-	    >two</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
-	  ><li class="src short"
-	  ><a href="#"
-	    >three</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
-	  ></ul
+	    ><a href="#"
+	      >foo</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ><li class="src short"
+	    ><a href="#"
+	      >bar</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ><li class="src short"
+	    ><a href="#"
+	      >baz</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ><li class="src short"
+	    ><a href="#"
+	      >one</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ><li class="src short"
+	    ><a href="#"
+	      >two</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ><li class="src short"
+	    ><a href="#"
+	      >three</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/BugExportHeadings.html b/html-test/ref/BugExportHeadings.html
index ac121737..7b3e7728 100644
--- a/html-test/ref/BugExportHeadings.html
+++ b/html-test/ref/BugExportHeadings.html
@@ -69,46 +69,48 @@
 	  ></ul
 	></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="#"
-	    >foo</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
-	  ><li class="src short"
-	  ><a href="#"
-	    >bar</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
 	  ><li class="src short"
-	  ><a href="#"
-	    >baz</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
-	  ><li class="src short"
-	  ><a href="#"
-	    >one</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
-	  ><li class="src short"
-	  ><a href="#"
-	    >two</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
-	  ><li class="src short"
-	  ><a href="#"
-	    >three</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
-	  ></ul
+	    ><a href="#"
+	      >foo</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ><li class="src short"
+	    ><a href="#"
+	      >bar</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ><li class="src short"
+	    ><a href="#"
+	      >baz</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ><li class="src short"
+	    ><a href="#"
+	      >one</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ><li class="src short"
+	    ><a href="#"
+	      >two</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ><li class="src short"
+	    ><a href="#"
+	      >three</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1 id="g:1"
diff --git a/html-test/ref/BundledPatterns.html b/html-test/ref/BundledPatterns.html
index 7f424a0d..dea60728 100644
--- a/html-test/ref/BundledPatterns.html
+++ b/html-test/ref/BundledPatterns.html
@@ -39,82 +39,84 @@
 	>BundledPatterns</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="#"
-	    >Vec</a
-	    > :: <a href="#"
-	    >Nat</a
-	    > -&gt; <a href="#"
-	    >*</a
-	    > -&gt; <a href="#"
-	    >*</a
-	    > <span class="keyword"
-	    >where</span
-	    ><ul class="subs"
-	    ><li
-	      ><a href="#"
-		>Nil</a
-		> :: <a href="#"
-		>Vec</a
-		> 0 a</li
-	      ><li
-	      ><span class="keyword"
-		>pattern</span
-		> <a href="#"
-		>(:&gt;)</a
-		> :: a -&gt; <a href="#"
-		>Vec</a
-		> n a -&gt; <a href="#"
-		>Vec</a
-		> (n <a href="#"
-		>+</a
-		> 1) 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="#"
-	    >RTree</a
-	    > :: <a href="#"
-	    >Nat</a
-	    > -&gt; <a href="#"
-	    >*</a
-	    > -&gt; <a href="#"
-	    >*</a
-	    > <span class="keyword"
-	    >where</span
-	    ><ul class="subs"
-	    ><li
-	      ><span class="keyword"
-		>pattern</span
-		> <a href="#"
-		>LR</a
-		> :: a -&gt; <a href="#"
-		>RTree</a
-		> 0 a</li
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >Vec</a
+	      > :: <a href="#"
+	      >Nat</a
+	      > -&gt; <a href="#"
+	      >*</a
+	      > -&gt; <a href="#"
+	      >*</a
+	      > <span class="keyword"
+	      >where</span
+	      ><ul class="subs"
 	      ><li
-	      ><span class="keyword"
-		>pattern</span
-		> <a href="#"
-		>BR</a
-		> :: <a href="#"
-		>RTree</a
-		> d a -&gt; <a href="#"
-		>RTree</a
-		> d a -&gt; <a href="#"
-		>RTree</a
-		> (d <a href="#"
-		>+</a
-		> 1) a</li
-	      ></ul
-	    ></li
-	  ></ul
+		><a href="#"
+		  >Nil</a
+		  > :: <a href="#"
+		  >Vec</a
+		  > 0 a</li
+		><li
+		><span class="keyword"
+		  >pattern</span
+		  > <a href="#"
+		  >(:&gt;)</a
+		  > :: a -&gt; <a href="#"
+		  >Vec</a
+		  > n a -&gt; <a href="#"
+		  >Vec</a
+		  > (n <a href="#"
+		  >+</a
+		  > 1) a</li
+		></ul
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >RTree</a
+	      > :: <a href="#"
+	      >Nat</a
+	      > -&gt; <a href="#"
+	      >*</a
+	      > -&gt; <a href="#"
+	      >*</a
+	      > <span class="keyword"
+	      >where</span
+	      ><ul class="subs"
+	      ><li
+		><span class="keyword"
+		  >pattern</span
+		  > <a href="#"
+		  >LR</a
+		  > :: a -&gt; <a href="#"
+		  >RTree</a
+		  > 0 a</li
+		><li
+		><span class="keyword"
+		  >pattern</span
+		  > <a href="#"
+		  >BR</a
+		  > :: <a href="#"
+		  >RTree</a
+		  > d a -&gt; <a href="#"
+		  >RTree</a
+		  > d a -&gt; <a href="#"
+		  >RTree</a
+		  > (d <a href="#"
+		  >+</a
+		  > 1) a</li
+		></ul
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/BundledPatterns2.html b/html-test/ref/BundledPatterns2.html
index 3c7b8c89..385fd07f 100644
--- a/html-test/ref/BundledPatterns2.html
+++ b/html-test/ref/BundledPatterns2.html
@@ -39,84 +39,86 @@
 	>BundledPatterns2</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="#"
-	    >Vec</a
-	    > :: <a href="#"
-	    >Nat</a
-	    > -&gt; <a href="#"
-	    >*</a
-	    > -&gt; <a href="#"
-	    >*</a
-	    > <span class="keyword"
-	    >where</span
-	    ><ul class="subs"
-	    ><li
-	      ><span class="keyword"
-		>pattern</span
-		> <a href="#"
-		>Empty</a
-		> :: <a href="#"
-		>Vec</a
-		> 0 a</li
-	      ><li
-	      ><span class="keyword"
-		>pattern</span
-		> <a href="#"
-		>(:&gt;)</a
-		> :: a -&gt; <a href="#"
-		>Vec</a
-		> n a -&gt; <a href="#"
-		>Vec</a
-		> (n <a href="#"
-		>+</a
-		> 1) 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="#"
-	    >RTree</a
-	    > :: <a href="#"
-	    >Nat</a
-	    > -&gt; <a href="#"
-	    >*</a
-	    > -&gt; <a href="#"
-	    >*</a
-	    > <span class="keyword"
-	    >where</span
-	    ><ul class="subs"
-	    ><li
-	      ><span class="keyword"
-		>pattern</span
-		> <a href="#"
-		>LR</a
-		> :: a -&gt; <a href="#"
-		>RTree</a
-		> 0 a</li
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >Vec</a
+	      > :: <a href="#"
+	      >Nat</a
+	      > -&gt; <a href="#"
+	      >*</a
+	      > -&gt; <a href="#"
+	      >*</a
+	      > <span class="keyword"
+	      >where</span
+	      ><ul class="subs"
 	      ><li
-	      ><span class="keyword"
-		>pattern</span
-		> <a href="#"
-		>BR</a
-		> :: <a href="#"
-		>RTree</a
-		> d a -&gt; <a href="#"
-		>RTree</a
-		> d a -&gt; <a href="#"
-		>RTree</a
-		> (d <a href="#"
-		>+</a
-		> 1) a</li
-	      ></ul
-	    ></li
-	  ></ul
+		><span class="keyword"
+		  >pattern</span
+		  > <a href="#"
+		  >Empty</a
+		  > :: <a href="#"
+		  >Vec</a
+		  > 0 a</li
+		><li
+		><span class="keyword"
+		  >pattern</span
+		  > <a href="#"
+		  >(:&gt;)</a
+		  > :: a -&gt; <a href="#"
+		  >Vec</a
+		  > n a -&gt; <a href="#"
+		  >Vec</a
+		  > (n <a href="#"
+		  >+</a
+		  > 1) a</li
+		></ul
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >RTree</a
+	      > :: <a href="#"
+	      >Nat</a
+	      > -&gt; <a href="#"
+	      >*</a
+	      > -&gt; <a href="#"
+	      >*</a
+	      > <span class="keyword"
+	      >where</span
+	      ><ul class="subs"
+	      ><li
+		><span class="keyword"
+		  >pattern</span
+		  > <a href="#"
+		  >LR</a
+		  > :: a -&gt; <a href="#"
+		  >RTree</a
+		  > 0 a</li
+		><li
+		><span class="keyword"
+		  >pattern</span
+		  > <a href="#"
+		  >BR</a
+		  > :: <a href="#"
+		  >RTree</a
+		  > d a -&gt; <a href="#"
+		  >RTree</a
+		  > d a -&gt; <a href="#"
+		  >RTree</a
+		  > (d <a href="#"
+		  >+</a
+		  > 1) a</li
+		></ul
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/DeprecatedClass.html b/html-test/ref/DeprecatedClass.html
index c7ff47dd..f7571316 100644
--- a/html-test/ref/DeprecatedClass.html
+++ b/html-test/ref/DeprecatedClass.html
@@ -39,30 +39,32 @@
 	>DeprecatedClass</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"
-	    >class</span
-	    > <a href="#"
-	    >SomeClass</a
-	    > a <span class="keyword"
-	    >where</span
-	    ><ul class="subs"
-	    ></ul
-	    ></li
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
 	  ><li class="src short"
-	  ><span class="keyword"
-	    >class</span
-	    > <a href="#"
-	    >SomeOtherClass</a
-	    > a <span class="keyword"
-	    >where</span
-	    ><ul class="subs"
+	    ><span class="keyword"
+	      >class</span
+	      > <a href="#"
+	      >SomeClass</a
+	      > a <span class="keyword"
+	      >where</span
+	      ><ul class="subs"
+	      ></ul
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >class</span
+	      > <a href="#"
+	      >SomeOtherClass</a
+	      > a <span class="keyword"
+	      >where</span
+	      ><ul class="subs"
+	      ></ul
+	      ></li
 	    ></ul
-	    ></li
-	  ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/DeprecatedData.html b/html-test/ref/DeprecatedData.html
index 1216c4e0..2caed880 100644
--- a/html-test/ref/DeprecatedData.html
+++ b/html-test/ref/DeprecatedData.html
@@ -39,42 +39,44 @@
 	>DeprecatedData</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="#"
-	    >Foo</a
-	    ><ul class="subs"
-	    ><li
-	      >= <a href="#"
-		>Foo</a
-		></li
-	      ><li
-	      >| <a href="#"
-		>Bar</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="#"
-	    >One</a
-	    ><ul class="subs"
-	    ><li
-	      >= <a href="#"
-		>One</a
-		></li
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >Foo</a
+	      ><ul class="subs"
+	      ><li
+		>= <a href="#"
+		  >Foo</a
+		  ></li
+		><li
+		>| <a href="#"
+		  >Bar</a
+		  ></li
+		></ul
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >One</a
+	      ><ul class="subs"
 	      ><li
-	      >| <a href="#"
-		>Two</a
-		></li
-	      ></ul
-	    ></li
-	  ></ul
+		>= <a href="#"
+		  >One</a
+		  ></li
+		><li
+		>| <a href="#"
+		  >Two</a
+		  ></li
+		></ul
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/DeprecatedFunction.html b/html-test/ref/DeprecatedFunction.html
index 4235df24..41bf7454 100644
--- a/html-test/ref/DeprecatedFunction.html
+++ b/html-test/ref/DeprecatedFunction.html
@@ -39,22 +39,24 @@
 	>DeprecatedFunction</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="#"
-	    >foo</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
 	  ><li class="src short"
-	  ><a href="#"
-	    >bar</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
-	  ></ul
+	    ><a href="#"
+	      >foo</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ><li class="src short"
+	    ><a href="#"
+	      >bar</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/DeprecatedFunction2.html b/html-test/ref/DeprecatedFunction2.html
index 6e420a74..bbf6cdd7 100644
--- a/html-test/ref/DeprecatedFunction2.html
+++ b/html-test/ref/DeprecatedFunction2.html
@@ -39,16 +39,18 @@
 	>DeprecatedFunction2</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="#"
-	    >foo</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
-	  ></ul
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
+	  ><li class="src short"
+	    ><a href="#"
+	      >foo</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/DeprecatedFunction3.html b/html-test/ref/DeprecatedFunction3.html
index 4f398f1c..96474a98 100644
--- a/html-test/ref/DeprecatedFunction3.html
+++ b/html-test/ref/DeprecatedFunction3.html
@@ -39,16 +39,18 @@
 	>DeprecatedFunction3</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="#"
-	    >foo</a
-	    > :: <a href="#"
-	    >Integer</a
-	    ></li
-	  ></ul
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
+	  ><li class="src short"
+	    ><a href="#"
+	      >foo</a
+	      > :: <a href="#"
+	      >Integer</a
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/DeprecatedNewtype.html b/html-test/ref/DeprecatedNewtype.html
index 9ce1b7f0..c7803c81 100644
--- a/html-test/ref/DeprecatedNewtype.html
+++ b/html-test/ref/DeprecatedNewtype.html
@@ -39,30 +39,32 @@
 	>DeprecatedNewtype</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"
-	    >newtype</span
-	    > <a href="#"
-	    >SomeNewType</a
-	    > = <a href="#"
-	    >SomeNewTypeConst</a
-	    > <a href="#"
-	    >String</a
-	    ></li
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
 	  ><li class="src short"
-	  ><span class="keyword"
-	    >newtype</span
-	    > <a href="#"
-	    >SomeOtherNewType</a
-	    > = <a href="#"
-	    >SomeOtherNewTypeConst</a
-	    > <a href="#"
-	    >String</a
-	    ></li
-	  ></ul
+	    ><span class="keyword"
+	      >newtype</span
+	      > <a href="#"
+	      >SomeNewType</a
+	      > = <a href="#"
+	      >SomeNewTypeConst</a
+	      > <a href="#"
+	      >String</a
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >newtype</span
+	      > <a href="#"
+	      >SomeOtherNewType</a
+	      > = <a href="#"
+	      >SomeOtherNewTypeConst</a
+	      > <a href="#"
+	      >String</a
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/DeprecatedReExport.html b/html-test/ref/DeprecatedReExport.html
index 38a7d9a7..fd137108 100644
--- a/html-test/ref/DeprecatedReExport.html
+++ b/html-test/ref/DeprecatedReExport.html
@@ -65,16 +65,18 @@
 	  ></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"
-	  ><a href="#"
-	    >foo</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
-	  ></ul
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
+	  ><li class="src short"
+	    ><a href="#"
+	      >foo</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1 id="g:1"
diff --git a/html-test/ref/DeprecatedRecord.html b/html-test/ref/DeprecatedRecord.html
index 24c0542a..3e2aa285 100644
--- a/html-test/ref/DeprecatedRecord.html
+++ b/html-test/ref/DeprecatedRecord.html
@@ -39,32 +39,34 @@
 	>DeprecatedRecord</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="#"
-	    >Foo</a
-	    > = <a href="#"
-	    >Foo</a
-	    > {<ul class="subs"
-	    ><li
-	      ><a href="#"
-		>fooName</a
-		> :: <a href="#"
-		>String</a
-		></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="#"
+	      >Foo</a
+	      > = <a href="#"
+	      >Foo</a
+	      > {<ul class="subs"
 	      ><li
-	      ><a href="#"
-		>fooValue</a
-		> :: <a href="#"
-		>Int</a
-		></li
-	      ></ul
-	    >}</li
-	  ></ul
+		><a href="#"
+		  >fooName</a
+		  > :: <a href="#"
+		  >String</a
+		  ></li
+		><li
+		><a href="#"
+		  >fooValue</a
+		  > :: <a href="#"
+		  >Int</a
+		  ></li
+		></ul
+	      >}</li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/DeprecatedTypeFamily.html b/html-test/ref/DeprecatedTypeFamily.html
index 9a879b36..6f267c01 100644
--- a/html-test/ref/DeprecatedTypeFamily.html
+++ b/html-test/ref/DeprecatedTypeFamily.html
@@ -39,30 +39,32 @@
 	>DeprecatedTypeFamily</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 family</span
-	    > <a href="#"
-	    >SomeTypeFamily</a
-	    > k :: <a href="#"
-	    >*</a
-	    > -&gt; <a href="#"
-	    >*</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="#"
-	    >SomeOtherTypeFamily</a
-	    > k :: <a href="#"
-	    >*</a
-	    > -&gt; <a href="#"
-	    >*</a
-	    ></li
-	  ></ul
+	    ><span class="keyword"
+	      >data family</span
+	      > <a href="#"
+	      >SomeTypeFamily</a
+	      > k :: <a href="#"
+	      >*</a
+	      > -&gt; <a href="#"
+	      >*</a
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data family</span
+	      > <a href="#"
+	      >SomeOtherTypeFamily</a
+	      > k :: <a href="#"
+	      >*</a
+	      > -&gt; <a href="#"
+	      >*</a
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/DeprecatedTypeSynonym.html b/html-test/ref/DeprecatedTypeSynonym.html
index 0bfd7e60..db0a8ab6 100644
--- a/html-test/ref/DeprecatedTypeSynonym.html
+++ b/html-test/ref/DeprecatedTypeSynonym.html
@@ -39,26 +39,28 @@
 	>DeprecatedTypeSynonym</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"
-	    >type</span
-	    > <a href="#"
-	    >TypeSyn</a
-	    > = <a href="#"
-	    >String</a
-	    ></li
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
 	  ><li class="src short"
-	  ><span class="keyword"
-	    >type</span
-	    > <a href="#"
-	    >OtherTypeSyn</a
-	    > = <a href="#"
-	    >String</a
-	    ></li
-	  ></ul
+	    ><span class="keyword"
+	      >type</span
+	      > <a href="#"
+	      >TypeSyn</a
+	      > = <a href="#"
+	      >String</a
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >type</span
+	      > <a href="#"
+	      >OtherTypeSyn</a
+	      > = <a href="#"
+	      >String</a
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/Examples.html b/html-test/ref/Examples.html
index a8eeeaf0..fa321fab 100644
--- a/html-test/ref/Examples.html
+++ b/html-test/ref/Examples.html
@@ -39,18 +39,20 @@
 	>Examples</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="#"
-	    >fib</a
-	    > :: <a href="#"
-	    >Integer</a
-	    > -&gt; <a href="#"
-	    >Integer</a
-	    ></li
-	  ></ul
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
+	  ><li class="src short"
+	    ><a href="#"
+	      >fib</a
+	      > :: <a href="#"
+	      >Integer</a
+	      > -&gt; <a href="#"
+	      >Integer</a
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/Extensions.html b/html-test/ref/Extensions.html
index 361c41e6..ee84df30 100644
--- a/html-test/ref/Extensions.html
+++ b/html-test/ref/Extensions.html
@@ -51,14 +51,16 @@
 	>Extensions</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="#"
-	    >foobar</a
-	    > :: t</li
-	  ></ul
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
+	  ><li class="src short"
+	    ><a href="#"
+	      >foobar</a
+	      > :: t</li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/GADTRecords.html b/html-test/ref/GADTRecords.html
index fffe5bd5..bba54b3e 100644
--- a/html-test/ref/GADTRecords.html
+++ b/html-test/ref/GADTRecords.html
@@ -39,52 +39,54 @@
 	>GADTRecords</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="#"
-	    >H1</a
-	    > a b <span class="keyword"
-	    >where</span
-	    ><ul class="subs"
-	    ><li
-	      ><a href="#"
-		>C1</a
-		> :: <a href="#"
-		>H1</a
-		> a b</li
-	      ><li
-	      ><a href="#"
-		>C2</a
-		> :: <a href="#"
-		>Ord</a
-		> a =&gt; [a] -&gt; <a href="#"
-		>H1</a
-		> a a</li
-	      ><li
-	      ><a href="#"
-		>C3</a
-		> :: {..} -&gt; <a href="#"
-		>H1</a
-		> <a href="#"
-		>Int</a
-		> <a href="#"
-		>Int</a
-		></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="#"
+	      >H1</a
+	      > a b <span class="keyword"
+	      >where</span
+	      ><ul class="subs"
 	      ><li
-	      ><a href="#"
-		>C4</a
-		> :: {..} -&gt; <a href="#"
-		>H1</a
-		> <a href="#"
-		>Int</a
-		> a</li
-	      ></ul
-	    ></li
-	  ></ul
+		><a href="#"
+		  >C1</a
+		  > :: <a href="#"
+		  >H1</a
+		  > a b</li
+		><li
+		><a href="#"
+		  >C2</a
+		  > :: <a href="#"
+		  >Ord</a
+		  > a =&gt; [a] -&gt; <a href="#"
+		  >H1</a
+		  > a a</li
+		><li
+		><a href="#"
+		  >C3</a
+		  > :: {..} -&gt; <a href="#"
+		  >H1</a
+		  > <a href="#"
+		  >Int</a
+		  > <a href="#"
+		  >Int</a
+		  ></li
+		><li
+		><a href="#"
+		  >C4</a
+		  > :: {..} -&gt; <a href="#"
+		  >H1</a
+		  > <a href="#"
+		  >Int</a
+		  > a</li
+		></ul
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/Hash.html b/html-test/ref/Hash.html
index 7cf99038..21004e20 100644
--- a/html-test/ref/Hash.html
+++ b/html-test/ref/Hash.html
@@ -74,60 +74,62 @@
 	  ></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="#"
-	    >HashTable</a
-	    > key val</li
-	  ><li class="src short"
-	  ><a href="#"
-	    >new</a
-	    > :: (<a href="#"
-	    >Eq</a
-	    > key, <a href="#"
-	    >Hash</a
-	    > key) =&gt; <a href="#"
-	    >Int</a
-	    > -&gt; <a href="#"
-	    >IO</a
-	    > (<a href="#"
-	    >HashTable</a
-	    > key val)</li
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
 	  ><li class="src short"
-	  ><a href="#"
-	    >insert</a
-	    > :: (<a href="#"
-	    >Eq</a
-	    > key, <a href="#"
-	    >Hash</a
-	    > key) =&gt; key -&gt; val -&gt; <a href="#"
-	    >IO</a
-	    > ()</li
-	  ><li class="src short"
-	  ><a href="#"
-	    >lookup</a
-	    > :: <a href="#"
-	    >Hash</a
-	    > key =&gt; key -&gt; <a href="#"
-	    >IO</a
-	    > (<a href="#"
-	    >Maybe</a
-	    > val)</li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >class</span
-	    > <a href="#"
-	    >Hash</a
-	    > a <span class="keyword"
-	    >where</span
-	    ><ul class="subs"
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >HashTable</a
+	      > key val</li
+	    ><li class="src short"
+	    ><a href="#"
+	      >new</a
+	      > :: (<a href="#"
+	      >Eq</a
+	      > key, <a href="#"
+	      >Hash</a
+	      > key) =&gt; <a href="#"
+	      >Int</a
+	      > -&gt; <a href="#"
+	      >IO</a
+	      > (<a href="#"
+	      >HashTable</a
+	      > key val)</li
+	    ><li class="src short"
+	    ><a href="#"
+	      >insert</a
+	      > :: (<a href="#"
+	      >Eq</a
+	      > key, <a href="#"
+	      >Hash</a
+	      > key) =&gt; key -&gt; val -&gt; <a href="#"
+	      >IO</a
+	      > ()</li
+	    ><li class="src short"
+	    ><a href="#"
+	      >lookup</a
+	      > :: <a href="#"
+	      >Hash</a
+	      > key =&gt; key -&gt; <a href="#"
+	      >IO</a
+	      > (<a href="#"
+	      >Maybe</a
+	      > val)</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >class</span
+	      > <a href="#"
+	      >Hash</a
+	      > a <span class="keyword"
+	      >where</span
+	      ><ul class="subs"
+	      ></ul
+	      ></li
 	    ></ul
-	    ></li
-	  ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1 id="g:1"
@@ -282,14 +284,14 @@
 	      ></div
 	    ></div
 	  ><div class="subs instances"
-	  ><p id="control.i:Hash" class="caption collapser" onclick="toggleSection('i:Hash')"
-	    >Instances</p
-	    ><div id="section.i:Hash" class="show"
-	    ><table
+	  ><details id="i:Hash" open="open"
+	    ><summary
+	      >Instances</summary
+	      ><table
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Hash:Hash:1" class="instance expander" onclick="toggleSection('i:ic:Hash:Hash:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Hash:Hash:1"
 		      ></span
 		      > <a href="#"
 		      >Hash</a
@@ -304,8 +306,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Hash:Hash:1" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:ic:Hash:Hash:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -319,13 +323,13 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Hash:Hash:2" class="instance expander" onclick="toggleSection('i:ic:Hash:Hash:2')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Hash:Hash:2"
 		      ></span
 		      > <a href="#"
 		      >Hash</a
@@ -340,8 +344,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Hash:Hash:2" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:ic:Hash:Hash:2"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -355,13 +361,13 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:Hash:Hash:3" class="instance expander" onclick="toggleSection('i:ic:Hash:Hash:3')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:Hash:Hash:3"
 		      ></span
 		      > (<a href="#"
 		      >Hash</a
@@ -378,8 +384,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Hash:Hash:3" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:ic:Hash:Hash:3"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -391,11 +399,11 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	></div
diff --git a/html-test/ref/HiddenInstances.html b/html-test/ref/HiddenInstances.html
index 5a1329fc..b3586649 100644
--- a/html-test/ref/HiddenInstances.html
+++ b/html-test/ref/HiddenInstances.html
@@ -39,22 +39,24 @@
 	>HiddenInstances</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"
-	    >class</span
-	    > <a href="#"
-	    >VisibleClass</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</span
-	    > <a href="#"
-	    >VisibleData</a
-	    ></li
-	  ></ul
+	    ><span class="keyword"
+	      >class</span
+	      > <a href="#"
+	      >VisibleClass</a
+	      > a</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >VisibleData</a
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
@@ -73,14 +75,14 @@
 	    >Should be visible</p
 	    ></div
 	  ><div class="subs instances"
-	  ><p id="control.i:VisibleClass" class="caption collapser" onclick="toggleSection('i:VisibleClass')"
-	    >Instances</p
-	    ><div id="section.i:VisibleClass" class="show"
-	    ><table
+	  ><details id="i:VisibleClass" open="open"
+	    ><summary
+	      >Instances</summary
+	      ><table
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:VisibleClass:VisibleClass:1" class="instance expander" onclick="toggleSection('i:ic:VisibleClass:VisibleClass:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:VisibleClass:VisibleClass:1"
 		      ></span
 		      > <a href="#"
 		      >VisibleClass</a
@@ -97,14 +99,16 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:VisibleClass:VisibleClass:1" class="inst-details hide"
-		    ></div
+		  ><details id="i:ic:VisibleClass:VisibleClass: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:VisibleClass:VisibleClass:2" class="instance expander" onclick="toggleSection('i:ic:VisibleClass:VisibleClass:2')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:VisibleClass:VisibleClass:2"
 		      ></span
 		      > <a href="#"
 		      >VisibleClass</a
@@ -121,12 +125,14 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:VisibleClass:VisibleClass:2" class="inst-details hide"
-		    ></div
+		  ><details id="i:ic:VisibleClass:VisibleClass:2"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	><div class="top"
@@ -143,14 +149,14 @@
 	    >Should be visible</p
 	    ></div
 	  ><div class="subs instances"
-	  ><p id="control.i:VisibleData" class="caption collapser" onclick="toggleSection('i:VisibleData')"
-	    >Instances</p
-	    ><div id="section.i:VisibleData" class="show"
-	    ><table
+	  ><details id="i:VisibleData" open="open"
+	    ><summary
+	      >Instances</summary
+	      ><table
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:VisibleData:Num:1" class="instance expander" onclick="toggleSection('i:id:VisibleData:Num:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:VisibleData:Num:1"
 		      ></span
 		      > <a href="#"
 		      >Num</a
@@ -167,8 +173,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:VisibleData:Num:1" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:id:VisibleData:Num:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -248,13 +256,13 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:VisibleData:VisibleClass:2" class="instance expander" onclick="toggleSection('i:id:VisibleData:VisibleClass:2')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:VisibleData:VisibleClass:2"
 		      ></span
 		      > <a href="#"
 		      >VisibleClass</a
@@ -271,12 +279,14 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:VisibleData:VisibleClass:2" class="inst-details hide"
-		    ></div
+		  ><details id="i:id:VisibleData:VisibleClass:2"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	></div
diff --git a/html-test/ref/HiddenInstancesB.html b/html-test/ref/HiddenInstancesB.html
index 11e9611f..d2f7b74d 100644
--- a/html-test/ref/HiddenInstancesB.html
+++ b/html-test/ref/HiddenInstancesB.html
@@ -39,22 +39,24 @@
 	>HiddenInstancesB</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"
-	    >class</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</span
-	    > <a href="#"
-	    >Bar</a
-	    ></li
-	  ></ul
+	    ><span class="keyword"
+	      >class</span
+	      > <a href="#"
+	      >Foo</a
+	      > a</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >Bar</a
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
@@ -73,14 +75,14 @@
 	    >Should be visible</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
@@ -97,12 +99,14 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:Foo:Foo:1" class="inst-details hide"
-		    ></div
+		  ><details id="i:ic:Foo:Foo:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	><div class="top"
@@ -119,14 +123,14 @@
 	    >Should be visible</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:id:Bar:Foo:1" class="instance expander" onclick="toggleSection('i:id:Bar:Foo:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:Bar:Foo:1"
 		      ></span
 		      > <a href="#"
 		      >Foo</a
@@ -143,12 +147,14 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:Bar:Foo:1" class="inst-details hide"
-		    ></div
+		  ><details id="i:id:Bar:Foo:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	></div
diff --git a/html-test/ref/Hyperlinks.html b/html-test/ref/Hyperlinks.html
index bc14415b..8e190358 100644
--- a/html-test/ref/Hyperlinks.html
+++ b/html-test/ref/Hyperlinks.html
@@ -39,16 +39,18 @@
 	>Hyperlinks</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="#"
-	    >foo</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
-	  ></ul
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
+	  ><li class="src short"
+	    ><a href="#"
+	      >foo</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/IgnoreExports.html b/html-test/ref/IgnoreExports.html
index 686fac7a..abfc0497 100644
--- a/html-test/ref/IgnoreExports.html
+++ b/html-test/ref/IgnoreExports.html
@@ -39,22 +39,24 @@
 	>IgnoreExports</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="#"
-	    >foo</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
 	  ><li class="src short"
-	  ><a href="#"
-	    >bar</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
-	  ></ul
+	    ><a href="#"
+	      >foo</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ><li class="src short"
+	    ><a href="#"
+	      >bar</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
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
diff --git a/html-test/ref/Math.html b/html-test/ref/Math.html
index 4d7cf62e..33ac0239 100644
--- a/html-test/ref/Math.html
+++ b/html-test/ref/Math.html
@@ -55,16 +55,18 @@
 	  ></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"
-	  ><a href="#"
-	    >f</a
-	    > :: <a href="#"
-	    >Integer</a
-	    ></li
-	  ></ul
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
+	  ><li class="src short"
+	    ><a href="#"
+	      >f</a
+	      > :: <a href="#"
+	      >Integer</a
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/NamedDoc.html b/html-test/ref/NamedDoc.html
index 95be55d1..ece4f381 100644
--- a/html-test/ref/NamedDoc.html
+++ b/html-test/ref/NamedDoc.html
@@ -39,10 +39,12 @@
 	>NamedDoc</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')"
-	></ul
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
+	  ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/Nesting.html b/html-test/ref/Nesting.html
index ac3e4784..76993674 100644
--- a/html-test/ref/Nesting.html
+++ b/html-test/ref/Nesting.html
@@ -39,42 +39,44 @@
 	>Nesting</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="#"
-	    >d</a
-	    > :: t</li
-	  ><li class="src short"
-	  ><a href="#"
-	    >e</a
-	    > :: t</li
-	  ><li class="src short"
-	  ><a href="#"
-	    >f</a
-	    > :: t</li
-	  ><li class="src short"
-	  ><a href="#"
-	    >g</a
-	    > :: t</li
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
 	  ><li class="src short"
-	  ><a href="#"
-	    >h</a
-	    > :: t</li
-	  ><li class="src short"
-	  ><a href="#"
-	    >i</a
-	    > :: t</li
-	  ><li class="src short"
-	  ><a href="#"
-	    >j</a
-	    > :: t</li
-	  ><li class="src short"
-	  ><a href="#"
-	    >k</a
-	    > :: t</li
-	  ></ul
+	    ><a href="#"
+	      >d</a
+	      > :: t</li
+	    ><li class="src short"
+	    ><a href="#"
+	      >e</a
+	      > :: t</li
+	    ><li class="src short"
+	    ><a href="#"
+	      >f</a
+	      > :: t</li
+	    ><li class="src short"
+	    ><a href="#"
+	      >g</a
+	      > :: t</li
+	    ><li class="src short"
+	    ><a href="#"
+	      >h</a
+	      > :: t</li
+	    ><li class="src short"
+	    ><a href="#"
+	      >i</a
+	      > :: t</li
+	    ><li class="src short"
+	    ><a href="#"
+	      >j</a
+	      > :: t</li
+	    ><li class="src short"
+	    ><a href="#"
+	      >k</a
+	      > :: t</li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/NoLayout.html b/html-test/ref/NoLayout.html
index 0fbd9762..607b5f8d 100644
--- a/html-test/ref/NoLayout.html
+++ b/html-test/ref/NoLayout.html
@@ -39,16 +39,18 @@
 	>NoLayout</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="#"
-	    >g</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
-	  ></ul
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
+	  ><li class="src short"
+	    ><a href="#"
+	      >g</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/NonGreedy.html b/html-test/ref/NonGreedy.html
index 2ad812ec..cc03a20b 100644
--- a/html-test/ref/NonGreedy.html
+++ b/html-test/ref/NonGreedy.html
@@ -39,14 +39,16 @@
 	>NonGreedy</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
-	    > :: a</li
-	  ></ul
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
+	  ><li class="src short"
+	    ><a href="#"
+	      >f</a
+	      > :: a</li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/Operators.html b/html-test/ref/Operators.html
index 0f1b9554..1db0a91a 100644
--- a/html-test/ref/Operators.html
+++ b/html-test/ref/Operators.html
@@ -47,114 +47,116 @@
 	  ></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"
-	  ><a href="#"
-	    >(+-)</a
-	    > :: a -&gt; a -&gt; a</li
-	  ><li class="src short"
-	  ><a href="#"
-	    >(*/)</a
-	    > :: a -&gt; a -&gt; a</li
-	  ><li class="src short"
-	  ><a href="#"
-	    >foo</a
-	    > :: a -&gt; a -&gt; a</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="#"
-	    >Foo</a
-	    ><ul class="subs"
-	    ><li
-	      >= <a href="#"
-		>Foo</a
-		> <a href="#"
-		>`Bar`</a
-		> <a href="#"
-		>Foo</a
-		></li
+	    ><a href="#"
+	      >(+-)</a
+	      > :: a -&gt; a -&gt; a</li
+	    ><li class="src short"
+	    ><a href="#"
+	      >(*/)</a
+	      > :: a -&gt; a -&gt; a</li
+	    ><li class="src short"
+	    ><a href="#"
+	      >foo</a
+	      > :: a -&gt; a -&gt; a</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >Foo</a
+	      ><ul class="subs"
 	      ><li
-	      >| <a href="#"
-		>Foo</a
-		> <a href="#"
-		>:-</a
-		> <a href="#"
-		>Foo</a
-		></li
-	      ></ul
-	    ></li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >pattern</span
-	    > <a href="#"
-	    >(:+)</a
-	    > :: <span class="keyword"
-	    >forall</span
-	    > a. a -&gt; a -&gt; [a]</li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >data</span
-	    > a <a href="#"
-	    >&lt;-&gt;</a
-	    > b <span class="keyword"
-	    >where</span
-	    ><ul class="subs"
-	    ><li
-	      ><a href="#"
-		>(:&lt;-&gt;)</a
-		> :: a -&gt; b -&gt; a <a href="#"
-		>&lt;-&gt;</a
-		> b</li
-	      ></ul
-	    ></li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >type family</span
-	    > a <a href="#"
-	    >++</a
-	    > b</li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >data family</span
-	    > a <a href="#"
-	    >**</a
-	    > b</li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >class</span
-	    > a <a href="#"
-	    >&gt;&lt;&gt;</a
-	    > b | a -&gt; b <span class="keyword"
-	    >where</span
-	    ><ul class="subs"
-	    ><li
-	      ><span class="keyword"
-		>type</span
-		> a <a href="#"
-		>&lt;&gt;&lt;</a
-		> b :: <a href="#"
-		>*</a
-		></li
+		>= <a href="#"
+		  >Foo</a
+		  > <a href="#"
+		  >`Bar`</a
+		  > <a href="#"
+		  >Foo</a
+		  ></li
+		><li
+		>| <a href="#"
+		  >Foo</a
+		  > <a href="#"
+		  >:-</a
+		  > <a href="#"
+		  >Foo</a
+		  ></li
+		></ul
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >pattern</span
+	      > <a href="#"
+	      >(:+)</a
+	      > :: <span class="keyword"
+	      >forall</span
+	      > a. a -&gt; a -&gt; [a]</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data</span
+	      > a <a href="#"
+	      >&lt;-&gt;</a
+	      > b <span class="keyword"
+	      >where</span
+	      ><ul class="subs"
 	      ><li
-	      ><span class="keyword"
-		>data</span
-		> a <a href="#"
-		>&gt;&lt;&lt;</a
-		> b</li
-	      ></ul
-	    ></li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >type</span
-	    > <a href="#"
-	    >(&gt;-&lt;)</a
-	    > a b = a <a href="#"
-	    >&lt;-&gt;</a
-	    > b</li
-	  ></ul
+		><a href="#"
+		  >(:&lt;-&gt;)</a
+		  > :: a -&gt; b -&gt; a <a href="#"
+		  >&lt;-&gt;</a
+		  > b</li
+		></ul
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >type family</span
+	      > a <a href="#"
+	      >++</a
+	      > b</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data family</span
+	      > a <a href="#"
+	      >**</a
+	      > b</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >class</span
+	      > a <a href="#"
+	      >&gt;&lt;&gt;</a
+	      > b | a -&gt; b <span class="keyword"
+	      >where</span
+	      ><ul class="subs"
+	      ><li
+		><span class="keyword"
+		  >type</span
+		  > a <a href="#"
+		  >&lt;&gt;&lt;</a
+		  > b :: <a href="#"
+		  >*</a
+		  ></li
+		><li
+		><span class="keyword"
+		  >data</span
+		  > a <a href="#"
+		  >&gt;&lt;&lt;</a
+		  > b</li
+		></ul
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >type</span
+	      > <a href="#"
+	      >(&gt;-&lt;)</a
+	      > a b = a <a href="#"
+	      >&lt;-&gt;</a
+	      > b</li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/OrphanInstances.html b/html-test/ref/OrphanInstances.html
index 96eb5b3d..b7fa346c 100644
--- a/html-test/ref/OrphanInstances.html
+++ b/html-test/ref/OrphanInstances.html
@@ -49,22 +49,24 @@
 	  ></ul
 	></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')"
-	></ul
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
+	  ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
 	>Documentation</h1
 	><h1
 	>Orphan instances</h1
-	><div id="section.orphans" class="show"
+	><div id="section.orphans"
 	><table
 	  ><tr
 	    ><td class="src clearfix"
 	      ><span class="inst-left"
-		><span id="control.i:o:ic:AClass:AClass:1" class="instance expander" onclick="toggleSection('i:o:ic:AClass:AClass:1')"
+		><span class="instance details-toggle-control details-toggle" data-details-id="i:o:ic:AClass:AClass:1"
 		  ></span
 		  > <a href="#"
 		  >AClass</a
@@ -81,8 +83,10 @@
 	      ></tr
 	    ><tr
 	    ><td colspan="2"
-	      ><div id="section.i:o:ic:AClass:AClass:1" class="inst-details hide"
-		><div class="subs methods"
+	      ><details id="i:o:ic:AClass:AClass:1"
+		><summary class="hide-when-js-enabled"
+		  >Instance details</summary
+		  ><div class="subs methods"
 		  ><p class="caption"
 		    >Methods</p
 		    ><p class="src"
@@ -96,7 +100,7 @@
 		      >#</a
 		      ></p
 		    ></div
-		  ></div
+		  ></details
 		></td
 	      ></tr
 	    ></table
diff --git a/html-test/ref/PR643.html b/html-test/ref/PR643.html
index d59e7f93..6fe27318 100644
--- a/html-test/ref/PR643.html
+++ b/html-test/ref/PR643.html
@@ -39,14 +39,16 @@
 	>PR643</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="#"
-	    >test</a
-	    > :: ()</li
-	  ></ul
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
+	  ><li class="src short"
+	    ><a href="#"
+	      >test</a
+	      > :: ()</li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/PR643_1.html b/html-test/ref/PR643_1.html
index 34f3e947..ecba8866 100644
--- a/html-test/ref/PR643_1.html
+++ b/html-test/ref/PR643_1.html
@@ -39,14 +39,16 @@
 	>PR643_1</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="#"
-	    >test</a
-	    > :: ()</li
-	  ></ul
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
+	  ><li class="src short"
+	    ><a href="#"
+	      >test</a
+	      > :: ()</li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/PatternSyns.html b/html-test/ref/PatternSyns.html
index 4b4eea96..bf0cdf1e 100644
--- a/html-test/ref/PatternSyns.html
+++ b/html-test/ref/PatternSyns.html
@@ -47,106 +47,108 @@
 	  ></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="#"
-	    >FooType</a
-	    > x = <a href="#"
-	    >FooCtor</a
-	    > x</li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >pattern</span
-	    > <a href="#"
-	    >Foo</a
-	    > :: <span class="keyword"
-	    >forall</span
-	    > x. x -&gt; <a href="#"
-	    >FooType</a
-	    > x</li
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
 	  ><li class="src short"
-	  ><span class="keyword"
-	    >pattern</span
-	    > <a href="#"
-	    >Bar</a
-	    > :: <span class="keyword"
-	    >forall</span
-	    > x. x -&gt; <a href="#"
-	    >FooType</a
-	    > (<a href="#"
-	    >FooType</a
-	    > x)</li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >pattern</span
-	    > <a href="#"
-	    >(:&lt;-&gt;)</a
-	    > :: <span class="keyword"
-	    >forall</span
-	    > x x1. x -&gt; x1 -&gt; (<a href="#"
-	    >FooType</a
-	    > x, <a href="#"
-	    >FooType</a
-	    > (<a href="#"
-	    >FooType</a
-	    > x1))</li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >data</span
-	    > <a href="#"
-	    >BlubType</a
-	    > = <a href="#"
-	    >Show</a
-	    > x =&gt; <a href="#"
-	    >BlubCtor</a
-	    > x</li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >pattern</span
-	    > <a href="#"
-	    >Blub</a
-	    > :: () =&gt; <span class="keyword"
-	    >forall</span
-	    > x. <a href="#"
-	    >Show</a
-	    > x =&gt; x -&gt; <a href="#"
-	    >BlubType</a
-	    ></li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >data</span
-	    > (a :: <a href="#"
-	    >*</a
-	    >) <a href="#"
-	    >&gt;&lt;</a
-	    > b = <a href="#"
-	    >Empty</a
-	    ></li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >pattern</span
-	    > <a href="#"
-	    >E</a
-	    > :: <span class="keyword"
-	    >forall</span
-	    > k a (b :: k). <a href="#"
-	    >(&gt;&lt;)</a
-	    > k a b</li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >pattern</span
-	    > <a href="#"
-	    >PatWithExplicitSig</a
-	    > :: <a href="#"
-	    >Eq</a
-	    > somex =&gt; somex -&gt; <a href="#"
-	    >FooType</a
-	    > somex</li
-	  ></ul
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >FooType</a
+	      > x = <a href="#"
+	      >FooCtor</a
+	      > x</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >pattern</span
+	      > <a href="#"
+	      >Foo</a
+	      > :: <span class="keyword"
+	      >forall</span
+	      > x. x -&gt; <a href="#"
+	      >FooType</a
+	      > x</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >pattern</span
+	      > <a href="#"
+	      >Bar</a
+	      > :: <span class="keyword"
+	      >forall</span
+	      > x. x -&gt; <a href="#"
+	      >FooType</a
+	      > (<a href="#"
+	      >FooType</a
+	      > x)</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >pattern</span
+	      > <a href="#"
+	      >(:&lt;-&gt;)</a
+	      > :: <span class="keyword"
+	      >forall</span
+	      > x x1. x -&gt; x1 -&gt; (<a href="#"
+	      >FooType</a
+	      > x, <a href="#"
+	      >FooType</a
+	      > (<a href="#"
+	      >FooType</a
+	      > x1))</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >BlubType</a
+	      > = <a href="#"
+	      >Show</a
+	      > x =&gt; <a href="#"
+	      >BlubCtor</a
+	      > x</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >pattern</span
+	      > <a href="#"
+	      >Blub</a
+	      > :: () =&gt; <span class="keyword"
+	      >forall</span
+	      > x. <a href="#"
+	      >Show</a
+	      > x =&gt; x -&gt; <a href="#"
+	      >BlubType</a
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data</span
+	      > (a :: <a href="#"
+	      >*</a
+	      >) <a href="#"
+	      >&gt;&lt;</a
+	      > b = <a href="#"
+	      >Empty</a
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >pattern</span
+	      > <a href="#"
+	      >E</a
+	      > :: <span class="keyword"
+	      >forall</span
+	      > k a (b :: k). <a href="#"
+	      >(&gt;&lt;)</a
+	      > k a b</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >pattern</span
+	      > <a href="#"
+	      >PatWithExplicitSig</a
+	      > :: <a href="#"
+	      >Eq</a
+	      > somex =&gt; somex -&gt; <a href="#"
+	      >FooType</a
+	      > somex</li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/Properties.html b/html-test/ref/Properties.html
index 0193b087..15585cd9 100644
--- a/html-test/ref/Properties.html
+++ b/html-test/ref/Properties.html
@@ -39,18 +39,20 @@
 	>Properties</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="#"
-	    >fib</a
-	    > :: <a href="#"
-	    >Integer</a
-	    > -&gt; <a href="#"
-	    >Integer</a
-	    ></li
-	  ></ul
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
+	  ><li class="src short"
+	    ><a href="#"
+	      >fib</a
+	      > :: <a href="#"
+	      >Integer</a
+	      > -&gt; <a href="#"
+	      >Integer</a
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/QuasiExpr.html b/html-test/ref/QuasiExpr.html
index 6f8255b9..ccec6856 100644
--- a/html-test/ref/QuasiExpr.html
+++ b/html-test/ref/QuasiExpr.html
@@ -101,14 +101,14 @@
 	      ></table
 	    ></div
 	  ><div class="subs instances"
-	  ><p id="control.i:Expr" class="caption collapser" onclick="toggleSection('i:Expr')"
-	    >Instances</p
-	    ><div id="section.i:Expr" class="show"
-	    ><table
+	  ><details id="i:Expr" open="open"
+	    ><summary
+	      >Instances</summary
+	      ><table
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:Expr:Show:1" class="instance expander" onclick="toggleSection('i:id:Expr:Show:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:Expr:Show:1"
 		      ></span
 		      > <a href="#"
 		      >Show</a
@@ -123,8 +123,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:Expr:Show:1" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:id:Expr:Show:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -160,11 +162,11 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	><div class="top"
@@ -215,14 +217,14 @@
 	      ></table
 	    ></div
 	  ><div class="subs instances"
-	  ><p id="control.i:BinOp" class="caption collapser" onclick="toggleSection('i:BinOp')"
-	    >Instances</p
-	    ><div id="section.i:BinOp" class="show"
-	    ><table
+	  ><details id="i:BinOp" open="open"
+	    ><summary
+	      >Instances</summary
+	      ><table
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:BinOp:Show:1" class="instance expander" onclick="toggleSection('i:id:BinOp:Show:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:BinOp:Show:1"
 		      ></span
 		      > <a href="#"
 		      >Show</a
@@ -237,8 +239,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:BinOp:Show:1" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:id:BinOp:Show:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -274,11 +278,11 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	><div class="top"
diff --git a/html-test/ref/SpuriousSuperclassConstraints.html b/html-test/ref/SpuriousSuperclassConstraints.html
index a1157b5d..53421ff5 100644
--- a/html-test/ref/SpuriousSuperclassConstraints.html
+++ b/html-test/ref/SpuriousSuperclassConstraints.html
@@ -81,14 +81,14 @@ Fix spurious superclass constraints bug.</pre
 	    >#</a
 	    ></p
 	  ><div class="subs instances"
-	  ><p id="control.i:SomeType" class="caption collapser" onclick="toggleSection('i:SomeType')"
-	    >Instances</p
-	    ><div id="section.i:SomeType" class="show"
-	    ><table
+	  ><details id="i:SomeType" open="open"
+	    ><summary
+	      >Instances</summary
+	      ><table
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:SomeType:Functor:1" class="instance expander" onclick="toggleSection('i:id:SomeType:Functor:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:SomeType:Functor:1"
 		      ></span
 		      > <a href="#"
 		      >Functor</a
@@ -103,8 +103,10 @@ Fix spurious superclass constraints bug.</pre
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:SomeType:Functor:1" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:id:SomeType:Functor:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -128,13 +130,13 @@ Fix spurious superclass constraints bug.</pre
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:id:SomeType:Applicative:2" class="instance expander" onclick="toggleSection('i:id:SomeType:Applicative:2')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:id:SomeType:Applicative:2"
 		      ></span
 		      > <a href="#"
 		      >Applicative</a
@@ -151,8 +153,10 @@ Fix spurious superclass constraints bug.</pre
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:id:SomeType:Applicative:2" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:id:SomeType:Applicative:2"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -212,11 +216,11 @@ Fix spurious superclass constraints bug.</pre
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	></div
diff --git a/html-test/ref/Test.html b/html-test/ref/Test.html
index 23ee2de6..4bcd2508 100644
--- a/html-test/ref/Test.html
+++ b/html-test/ref/Test.html
@@ -152,480 +152,482 @@
 	  ></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="#"
-	    >T</a
-	    > a b<ul class="subs"
-	    ><li
-	      >= <a href="#"
-		>A</a
-		> <a href="#"
-		>Int</a
-		> (<a href="#"
-		>Maybe</a
-		> <a href="#"
-		>Float</a
-		>)</li
-	      ><li
-	      >| <a href="#"
-		>B</a
-		> (<a href="#"
-		>T</a
-		> a b, <a href="#"
-		>T</a
-		> <a href="#"
-		>Int</a
-		> <a href="#"
-		>Float</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="#"
-	    >T2</a
-	    > a b</li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >data</span
-	    > <a href="#"
-	    >T3</a
-	    > a b<ul class="subs"
-	    ><li
-	      >= <a href="#"
-		>A1</a
-		> a</li
-	      ><li
-	      >| <a href="#"
-		>B1</a
-		> b</li
-	      ></ul
-	    ></li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >data</span
-	    > <a href="#"
-	    >T4</a
-	    > a b<ul class="subs"
-	    ><li
-	      >= <a href="#"
-		>A2</a
-		> a</li
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >T</a
+	      > a b<ul class="subs"
 	      ><li
-	      >| <a href="#"
-		>B2</a
-		> b</li
-	      ></ul
-	    ></li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >data</span
-	    > <a href="#"
-	    >T5</a
-	    > a b<ul class="subs"
-	    ><li
-	      >= <a href="#"
-		>A3</a
-		> a</li
+		>= <a href="#"
+		  >A</a
+		  > <a href="#"
+		  >Int</a
+		  > (<a href="#"
+		  >Maybe</a
+		  > <a href="#"
+		  >Float</a
+		  >)</li
+		><li
+		>| <a href="#"
+		  >B</a
+		  > (<a href="#"
+		  >T</a
+		  > a b, <a href="#"
+		  >T</a
+		  > <a href="#"
+		  >Int</a
+		  > <a href="#"
+		  >Float</a
+		  >)</li
+		></ul
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >T2</a
+	      > a b</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >T3</a
+	      > a b<ul class="subs"
 	      ><li
-	      >| <a href="#"
-		>B3</a
-		> b</li
-	      ></ul
-	    ></li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >data</span
-	    > <a href="#"
-	    >T6</a
-	    ><ul class="subs"
-	    ><li
-	      >= <a href="#"
-		>A4</a
-		></li
+		>= <a href="#"
+		  >A1</a
+		  > a</li
+		><li
+		>| <a href="#"
+		  >B1</a
+		  > b</li
+		></ul
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >T4</a
+	      > a b<ul class="subs"
 	      ><li
-	      >| <a href="#"
-		>B4</a
-		></li
+		>= <a href="#"
+		  >A2</a
+		  > a</li
+		><li
+		>| <a href="#"
+		  >B2</a
+		  > b</li
+		></ul
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >T5</a
+	      > a b<ul class="subs"
 	      ><li
-	      >| <a href="#"
-		>C4</a
-		></li
-	      ></ul
-	    ></li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >newtype</span
-	    > <a href="#"
-	    >N1</a
-	    > a = <a href="#"
-	    >N1</a
-	    > a</li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >newtype</span
-	    > <a href="#"
-	    >N2</a
-	    > a b = <a href="#"
-	    >N2</a
-	    > {<ul class="subs"
-	    ><li
-	      ><a href="#"
-		>n</a
-		> :: a b</li
-	      ></ul
-	    >}</li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >newtype</span
-	    > <a href="#"
-	    >N3</a
-	    > a b = <a href="#"
-	    >N3</a
-	    > {<ul class="subs"
-	    ><li
-	      ><a href="#"
-		>n3</a
-		> :: a b</li
-	      ></ul
-	    >}</li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >data</span
-	    > <a href="#"
-	    >N4</a
-	    > a b</li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >newtype</span
-	    > <a href="#"
-	    >N5</a
-	    > a b = <a href="#"
-	    >N5</a
-	    > {<ul class="subs"
-	    ><li
-	      ><a href="#"
-		>n5</a
-		> :: a b</li
-	      ></ul
-	    >}</li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >newtype</span
-	    > <a href="#"
-	    >N6</a
-	    > a b = <a href="#"
-	    >N6</a
-	    > {<ul class="subs"
-	    ><li
-	      ><a href="#"
-		>n6</a
-		> :: a b</li
-	      ></ul
-	    >}</li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >newtype</span
-	    > <a href="#"
-	    >N7</a
-	    > a b = <a href="#"
-	    >N7</a
-	    > {<ul class="subs"
-	    ><li
-	      ><a href="#"
-		>n7</a
-		> :: a b</li
-	      ></ul
-	    >}</li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >data</span
-	    > <a href="#"
-	    >R</a
-	    ><ul class="subs"
-	    ><li
-	      >= <a href="#"
-		>C1</a
-		> { <ul class="subs"
+		>= <a href="#"
+		  >A3</a
+		  > a</li
 		><li
-		  ><a href="#"
-		    >p</a
-		    > :: <a href="#"
-		    >Int</a
-		    ></li
-		  ><li
-		  ><a href="#"
-		    >q</a
-		    > :: <span class="keyword"
-		    >forall</span
-		    > a. a -&gt; a</li
-		  ><li
-		  ><a href="#"
-		    >r</a
-		    >, <a href="#"
-		    >s</a
-		    > :: <a href="#"
-		    >Int</a
-		    ></li
-		  ></ul
-		> }</li
+		>| <a href="#"
+		  >B3</a
+		  > b</li
+		></ul
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >T6</a
+	      ><ul class="subs"
 	      ><li
-	      >| <a href="#"
-		>C2</a
-		> { <ul class="subs"
+		>= <a href="#"
+		  >A4</a
+		  ></li
 		><li
-		  ><a href="#"
-		    >t</a
-		    > :: T1 -&gt; <a href="#"
-		    >T2</a
-		    > <a href="#"
-		    >Int</a
-		    > <a href="#"
-		    >Int</a
-		    > -&gt; <a href="#"
-		    >T3</a
-		    > <a href="#"
-		    >Bool</a
-		    > <a href="#"
-		    >Bool</a
-		    > -&gt; <a href="#"
-		    >T4</a
-		    > <a href="#"
-		    >Float</a
-		    > <a href="#"
-		    >Float</a
-		    > -&gt; <a href="#"
-		    >T5</a
-		    > () ()</li
-		  ><li
-		  ><a href="#"
-		    >u</a
-		    >, <a href="#"
-		    >v</a
-		    > :: <a href="#"
-		    >Int</a
-		    ></li
-		  ></ul
-		> }</li
-	      ></ul
-	    ></li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >data</span
-	    > <a href="#"
-	    >R1</a
-	    > = <a href="#"
-	    >C3</a
-	    > {<ul class="subs"
-	    ><li
-	      ><a href="#"
-		>s1</a
-		> :: <a href="#"
-		>Int</a
-		></li
+		>| <a href="#"
+		  >B4</a
+		  ></li
+		><li
+		>| <a href="#"
+		  >C4</a
+		  ></li
+		></ul
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >newtype</span
+	      > <a href="#"
+	      >N1</a
+	      > a = <a href="#"
+	      >N1</a
+	      > a</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >newtype</span
+	      > <a href="#"
+	      >N2</a
+	      > a b = <a href="#"
+	      >N2</a
+	      > {<ul class="subs"
 	      ><li
-	      ><a href="#"
-		>s2</a
-		> :: <a href="#"
-		>Int</a
-		></li
+		><a href="#"
+		  >n</a
+		  > :: a b</li
+		></ul
+	      >}</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >newtype</span
+	      > <a href="#"
+	      >N3</a
+	      > a b = <a href="#"
+	      >N3</a
+	      > {<ul class="subs"
 	      ><li
-	      ><a href="#"
-		>s3</a
-		> :: <a href="#"
-		>Int</a
-		></li
-	      ></ul
-	    >}</li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >class</span
-	    > <a href="#"
-	    >D</a
-	    > a =&gt; <a href="#"
-	    >C</a
-	    > a <span class="keyword"
-	    >where</span
-	    ><ul class="subs"
-	    ></ul
-	    ></li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >class</span
-	    > <a href="#"
-	    >D</a
-	    > a <span class="keyword"
-	    >where</span
-	    ><ul class="subs"
-	    ></ul
-	    ></li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >class</span
-	    > <a href="#"
-	    >E</a
-	    > a</li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >class</span
-	    > <a href="#"
-	    >F</a
-	    > a <span class="keyword"
-	    >where</span
-	    ><ul class="subs"
-	    ></ul
-	    ></li
-	  ><li class="src short"
-	  ><a href="#"
-	    >a</a
-	    > :: <a href="#"
-	    >C</a
-	    > a =&gt; <a href="#"
-	    >IO</a
-	    > a</li
-	  ><li class="src short"
-	  ><a href="#"
-	    >f</a
-	    > :: <a href="#"
-	    >C</a
-	    > a =&gt; a -&gt; <a href="#"
-	    >Int</a
-	    ></li
-	  ><li class="src short"
-	  ><a href="#"
-	    >g</a
-	    > :: <a href="#"
-	    >Int</a
-	    > -&gt; <a href="#"
-	    >IO</a
-	    > CInt</li
-	  ><li class="src short"
-	  ><a href="#"
-	    >hidden</a
-	    > :: <a href="#"
-	    >Int</a
-	    > -&gt; <a href="#"
-	    >Int</a
-	    ></li
-	  ><li class="src short"
-	  >module <a href="#"
-	    >Visible</a
-	    ></li
-	  ><li class="src short"
-	  ><span class="keyword"
-	    >data</span
-	    > <a href="#"
-	    >Ex</a
-	    > a<ul class="subs"
-	    ><li
-	      >= <a href="#"
-		>C</a
-		> b =&gt; <a href="#"
-		>Ex1</a
-		> b</li
+		><a href="#"
+		  >n3</a
+		  > :: a b</li
+		></ul
+	      >}</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >N4</a
+	      > a b</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >newtype</span
+	      > <a href="#"
+	      >N5</a
+	      > a b = <a href="#"
+	      >N5</a
+	      > {<ul class="subs"
 	      ><li
-	      >| <a href="#"
-		>Ex2</a
-		> b</li
+		><a href="#"
+		  >n5</a
+		  > :: a b</li
+		></ul
+	      >}</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >newtype</span
+	      > <a href="#"
+	      >N6</a
+	      > a b = <a href="#"
+	      >N6</a
+	      > {<ul class="subs"
 	      ><li
-	      >| <a href="#"
-		>C</a
-		> a =&gt; <a href="#"
-		>Ex3</a
-		> b</li
+		><a href="#"
+		  >n6</a
+		  > :: a b</li
+		></ul
+	      >}</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >newtype</span
+	      > <a href="#"
+	      >N7</a
+	      > a b = <a href="#"
+	      >N7</a
+	      > {<ul class="subs"
 	      ><li
-	      >| <a href="#"
-		>Ex4</a
-		> (<span class="keyword"
-		>forall</span
-		> a. a -&gt; a)</li
+		><a href="#"
+		  >n7</a
+		  > :: a b</li
+		></ul
+	      >}</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >R</a
+	      ><ul class="subs"
+	      ><li
+		>= <a href="#"
+		  >C1</a
+		  > { <ul class="subs"
+		  ><li
+		    ><a href="#"
+		      >p</a
+		      > :: <a href="#"
+		      >Int</a
+		      ></li
+		    ><li
+		    ><a href="#"
+		      >q</a
+		      > :: <span class="keyword"
+		      >forall</span
+		      > a. a -&gt; a</li
+		    ><li
+		    ><a href="#"
+		      >r</a
+		      >, <a href="#"
+		      >s</a
+		      > :: <a href="#"
+		      >Int</a
+		      ></li
+		    ></ul
+		  > }</li
+		><li
+		>| <a href="#"
+		  >C2</a
+		  > { <ul class="subs"
+		  ><li
+		    ><a href="#"
+		      >t</a
+		      > :: T1 -&gt; <a href="#"
+		      >T2</a
+		      > <a href="#"
+		      >Int</a
+		      > <a href="#"
+		      >Int</a
+		      > -&gt; <a href="#"
+		      >T3</a
+		      > <a href="#"
+		      >Bool</a
+		      > <a href="#"
+		      >Bool</a
+		      > -&gt; <a href="#"
+		      >T4</a
+		      > <a href="#"
+		      >Float</a
+		      > <a href="#"
+		      >Float</a
+		      > -&gt; <a href="#"
+		      >T5</a
+		      > () ()</li
+		    ><li
+		    ><a href="#"
+		      >u</a
+		      >, <a href="#"
+		      >v</a
+		      > :: <a href="#"
+		      >Int</a
+		      ></li
+		    ></ul
+		  > }</li
+		></ul
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >R1</a
+	      > = <a href="#"
+	      >C3</a
+	      > {<ul class="subs"
+	      ><li
+		><a href="#"
+		  >s1</a
+		  > :: <a href="#"
+		  >Int</a
+		  ></li
+		><li
+		><a href="#"
+		  >s2</a
+		  > :: <a href="#"
+		  >Int</a
+		  ></li
+		><li
+		><a href="#"
+		  >s3</a
+		  > :: <a href="#"
+		  >Int</a
+		  ></li
+		></ul
+	      >}</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >class</span
+	      > <a href="#"
+	      >D</a
+	      > a =&gt; <a href="#"
+	      >C</a
+	      > a <span class="keyword"
+	      >where</span
+	      ><ul class="subs"
 	      ></ul
-	    ></li
-	  ><li class="src short"
-	  ><a href="#"
-	    >k</a
-	    > :: <a href="#"
-	    >T</a
-	    > () () -&gt; <a href="#"
-	    >T2</a
-	    > <a href="#"
-	    >Int</a
-	    > <a href="#"
-	    >Int</a
-	    > -&gt; (<a href="#"
-	    >T3</a
-	    > <a href="#"
-	    >Bool</a
-	    > <a href="#"
-	    >Bool</a
-	    > -&gt; <a href="#"
-	    >T4</a
-	    > <a href="#"
-	    >Float</a
-	    > <a href="#"
-	    >Float</a
-	    >) -&gt; <a href="#"
-	    >T5</a
-	    > () () -&gt; <a href="#"
-	    >IO</a
-	    > ()</li
-	  ><li class="src short"
-	  ><a href="#"
-	    >l</a
-	    > :: (<a href="#"
-	    >Int</a
-	    >, <a href="#"
-	    >Int</a
-	    >, <a href="#"
-	    >Float</a
-	    >) -&gt; <a href="#"
-	    >Int</a
-	    ></li
-	  ><li class="src short"
-	  ><a href="#"
-	    >m</a
-	    > :: <a href="#"
-	    >R</a
-	    > -&gt; <a href="#"
-	    >N1</a
-	    > () -&gt; <a href="#"
-	    >IO</a
-	    > <a href="#"
-	    >Int</a
-	    ></li
-	  ><li class="src short"
-	  ><a href="#"
-	    >o</a
-	    > :: <a href="#"
-	    >Float</a
-	    > -&gt; <a href="#"
-	    >IO</a
-	    > <a href="#"
-	    >Float</a
-	    ></li
-	  ><li class="src short"
-	  ><a href="#"
-	    >f'</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
-	  ><li class="src short"
-	  ><a href="#"
-	    >withType</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
-	  ><li class="src short"
-	  ><a href="#"
-	    >withoutType</a
-	    > :: a</li
-	  ></ul
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >class</span
+	      > <a href="#"
+	      >D</a
+	      > a <span class="keyword"
+	      >where</span
+	      ><ul class="subs"
+	      ></ul
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >class</span
+	      > <a href="#"
+	      >E</a
+	      > a</li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >class</span
+	      > <a href="#"
+	      >F</a
+	      > a <span class="keyword"
+	      >where</span
+	      ><ul class="subs"
+	      ></ul
+	      ></li
+	    ><li class="src short"
+	    ><a href="#"
+	      >a</a
+	      > :: <a href="#"
+	      >C</a
+	      > a =&gt; <a href="#"
+	      >IO</a
+	      > a</li
+	    ><li class="src short"
+	    ><a href="#"
+	      >f</a
+	      > :: <a href="#"
+	      >C</a
+	      > a =&gt; a -&gt; <a href="#"
+	      >Int</a
+	      ></li
+	    ><li class="src short"
+	    ><a href="#"
+	      >g</a
+	      > :: <a href="#"
+	      >Int</a
+	      > -&gt; <a href="#"
+	      >IO</a
+	      > CInt</li
+	    ><li class="src short"
+	    ><a href="#"
+	      >hidden</a
+	      > :: <a href="#"
+	      >Int</a
+	      > -&gt; <a href="#"
+	      >Int</a
+	      ></li
+	    ><li class="src short"
+	    >module <a href="#"
+	      >Visible</a
+	      ></li
+	    ><li class="src short"
+	    ><span class="keyword"
+	      >data</span
+	      > <a href="#"
+	      >Ex</a
+	      > a<ul class="subs"
+	      ><li
+		>= <a href="#"
+		  >C</a
+		  > b =&gt; <a href="#"
+		  >Ex1</a
+		  > b</li
+		><li
+		>| <a href="#"
+		  >Ex2</a
+		  > b</li
+		><li
+		>| <a href="#"
+		  >C</a
+		  > a =&gt; <a href="#"
+		  >Ex3</a
+		  > b</li
+		><li
+		>| <a href="#"
+		  >Ex4</a
+		  > (<span class="keyword"
+		  >forall</span
+		  > a. a -&gt; a)</li
+		></ul
+	      ></li
+	    ><li class="src short"
+	    ><a href="#"
+	      >k</a
+	      > :: <a href="#"
+	      >T</a
+	      > () () -&gt; <a href="#"
+	      >T2</a
+	      > <a href="#"
+	      >Int</a
+	      > <a href="#"
+	      >Int</a
+	      > -&gt; (<a href="#"
+	      >T3</a
+	      > <a href="#"
+	      >Bool</a
+	      > <a href="#"
+	      >Bool</a
+	      > -&gt; <a href="#"
+	      >T4</a
+	      > <a href="#"
+	      >Float</a
+	      > <a href="#"
+	      >Float</a
+	      >) -&gt; <a href="#"
+	      >T5</a
+	      > () () -&gt; <a href="#"
+	      >IO</a
+	      > ()</li
+	    ><li class="src short"
+	    ><a href="#"
+	      >l</a
+	      > :: (<a href="#"
+	      >Int</a
+	      >, <a href="#"
+	      >Int</a
+	      >, <a href="#"
+	      >Float</a
+	      >) -&gt; <a href="#"
+	      >Int</a
+	      ></li
+	    ><li class="src short"
+	    ><a href="#"
+	      >m</a
+	      > :: <a href="#"
+	      >R</a
+	      > -&gt; <a href="#"
+	      >N1</a
+	      > () -&gt; <a href="#"
+	      >IO</a
+	      > <a href="#"
+	      >Int</a
+	      ></li
+	    ><li class="src short"
+	    ><a href="#"
+	      >o</a
+	      > :: <a href="#"
+	      >Float</a
+	      > -&gt; <a href="#"
+	      >IO</a
+	      > <a href="#"
+	      >Float</a
+	      ></li
+	    ><li class="src short"
+	    ><a href="#"
+	      >f'</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ><li class="src short"
+	    ><a href="#"
+	      >withType</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ><li class="src short"
+	    ><a href="#"
+	      >withoutType</a
+	      > :: a</li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1 id="g:1"
@@ -1561,14 +1563,14 @@
 	      ></p
 	    ></div
 	  ><div class="subs instances"
-	  ><p id="control.i:D" class="caption collapser" onclick="toggleSection('i:D')"
-	    >Instances</p
-	    ><div id="section.i:D" class="show"
-	    ><table
+	  ><details id="i:D" open="open"
+	    ><summary
+	      >Instances</summary
+	      ><table
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:D:D:1" class="instance expander" onclick="toggleSection('i:ic:D:D:1')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:D:D:1"
 		      ></span
 		      > <a href="#"
 		      >D</a
@@ -1583,8 +1585,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:D:D:1" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:ic:D:D:1"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -1608,13 +1612,13 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span id="control.i:ic:D:D:2" class="instance expander" onclick="toggleSection('i:ic:D:D:2')"
+		    ><span class="instance details-toggle-control details-toggle" data-details-id="i:ic:D:D:2"
 		      ></span
 		      > <a href="#"
 		      >D</a
@@ -1629,8 +1633,10 @@
 		  ></tr
 		><tr
 		><td colspan="2"
-		  ><div id="section.i:ic:D:D:2" class="inst-details hide"
-		    ><div class="subs methods"
+		  ><details id="i:ic:D:D:2"
+		    ><summary class="hide-when-js-enabled"
+		      >Instance details</summary
+		      ><div class="subs methods"
 		      ><p class="caption"
 			>Methods</p
 			><p class="src"
@@ -1654,11 +1660,11 @@
 			  >#</a
 			  ></p
 			></div
-		      ></div
+		      ></details
 		    ></td
 		  ></tr
 		></table
-	      ></div
+	      ></details
 	    ></div
 	  ></div
 	><div class="top"
diff --git a/html-test/ref/Threaded.html b/html-test/ref/Threaded.html
index 0d16ba9a..836a4db2 100644
--- a/html-test/ref/Threaded.html
+++ b/html-test/ref/Threaded.html
@@ -49,16 +49,18 @@
 	  ></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"
-	  ><a href="#"
-	    >f</a
-	    > :: <a href="#"
-	    >Integer</a
-	    ></li
-	  ></ul
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
+	  ><li class="src short"
+	    ><a href="#"
+	      >f</a
+	      > :: <a href="#"
+	      >Integer</a
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/Threaded_TH.html b/html-test/ref/Threaded_TH.html
index 553ea0e3..7f80b127 100644
--- a/html-test/ref/Threaded_TH.html
+++ b/html-test/ref/Threaded_TH.html
@@ -50,14 +50,16 @@
 	  ></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"
-	  ><a href="#"
-	    >forkTH</a
-	    > :: Q Exp</li
-	  ></ul
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
+	  ><li class="src short"
+	    ><a href="#"
+	      >forkTH</a
+	      > :: Q Exp</li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/Ticket112.html b/html-test/ref/Ticket112.html
index 25a4b22d..ccd39ff0 100644
--- a/html-test/ref/Ticket112.html
+++ b/html-test/ref/Ticket112.html
@@ -39,14 +39,16 @@
 	>Ticket112</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
-	    > :: a</li
-	  ></ul
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
+	  ><li class="src short"
+	    ><a href="#"
+	      >f</a
+	      > :: a</li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/Ticket75.html b/html-test/ref/Ticket75.html
index e4def849..488913b1 100644
--- a/html-test/ref/Ticket75.html
+++ b/html-test/ref/Ticket75.html
@@ -39,24 +39,26 @@
 	>Ticket75</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 <a href="#"
-	    >:-</a
-	    > b = <a href="#"
-	    >Q</a
-	    ></li
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
 	  ><li class="src short"
-	  ><a href="#"
-	    >f</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
-	  ></ul
+	    ><span class="keyword"
+	      >data</span
+	      > a <a href="#"
+	      >:-</a
+	      > b = <a href="#"
+	      >Q</a
+	      ></li
+	    ><li class="src short"
+	    ><a href="#"
+	      >f</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
diff --git a/html-test/ref/TitledPicture.html b/html-test/ref/TitledPicture.html
index 3f3cb2e4..966c2a34 100644
--- a/html-test/ref/TitledPicture.html
+++ b/html-test/ref/TitledPicture.html
@@ -39,22 +39,24 @@
 	>TitledPicture</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="#"
-	    >foo</a
-	    > :: <a href="#"
-	    >Integer</a
-	    ></li
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
 	  ><li class="src short"
-	  ><a href="#"
-	    >bar</a
-	    > :: <a href="#"
-	    >Integer</a
-	    ></li
-	  ></ul
+	    ><a href="#"
+	      >foo</a
+	      > :: <a href="#"
+	      >Integer</a
+	      ></li
+	    ><li class="src short"
+	    ><a href="#"
+	      >bar</a
+	      > :: <a href="#"
+	      >Integer</a
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
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
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
diff --git a/html-test/ref/Unicode.html b/html-test/ref/Unicode.html
index fb04b942..0f2a30d4 100644
--- a/html-test/ref/Unicode.html
+++ b/html-test/ref/Unicode.html
@@ -39,16 +39,18 @@
 	>Unicode</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="#"
-	    >x</a
-	    > :: <a href="#"
-	    >Int</a
-	    ></li
-	  ></ul
+      ><details id="syn"
+	><summary
+	  >Synopsis</summary
+	  ><ul class="details-toggle" data-details-id="syn"
+	  ><li class="src short"
+	    ><a href="#"
+	      >x</a
+	      > :: <a href="#"
+	      >Int</a
+	      ></li
+	    ></ul
+	  ></details
 	></div
       ><div id="interface"
       ><h1
-- 
cgit v1.2.3