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/Bug6.html | 146 ++++++++++++++++++++++++------------------------
 1 file changed, 74 insertions(+), 72 deletions(-)

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

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
-- 
cgit v1.2.3