Use <details> element for collapsibles (#690)

* Remove unnecessary call to 'collapseSection'

The call is unnecessary since there is no corresponding toggle for hiding the
section of orphan instances.

* Use <details> for collapsibles

This makes them work even when JS is disabled. Closes #560.

1 files changed, 23 insertions, 7 deletions

diff --git a/haddock-api/resources/html/Ocean.std-theme/ocean.css b/haddock-api/resources/html/Ocean.std-theme/ocean.css
index 20e37ca8..0852dea5 100644
--- a/haddock-api/resources/html/Ocean.std-theme/ocean.css
+++ b/haddock-api/resources/html/Ocean.std-theme/ocean.css
@@ -46,6 +46,14 @@ a[href].def:hover { color: rgb(78, 98, 114); }
 
 /* @end */
 
+/* @group Show and hide with JS */
+
+body.js-enabled .hide-when-js-enabled {
+  display: none;
+}
+
+/* @end */
+
 /* @group Fonts & Sizes */
 
 /* Basic technique & IE workarounds from YUI 3
@@ -106,7 +114,7 @@ pre, code, kbd, samp, tt, .src {
 
 /* @group Common */
 
-.caption, h1, h2, h3, h4, h5, h6 {
+.caption, h1, h2, h3, h4, h5, h6, summary {
   font-weight: bold;
   color: rgb(78,98,114);
   margin: 0.8em 0 0.4em;
@@ -168,6 +176,16 @@ p.caption.expander {
   min-height: 9px;
 }
 
+summary {
+  cursor: pointer;
+  outline: none;
+  list-style-image: url(plus.gif);
+  list-style-position: outside;
+}
+
+details[open] > summary {
+  list-style-image: url(minus.gif);
+}
 
 pre {
   padding: 0.25em;
@@ -338,7 +356,8 @@ div#style-menu-holder {
   z-index: 1;
 }
 
-#synopsis .caption {
+#synopsis summary {
+  display: block;
   float: left;
   width: 29px;
   color: rgba(255,255,255,0);
@@ -346,16 +365,13 @@ div#style-menu-holder {
   margin: 0;
   font-size: 1px;
   padding: 0;
+  background: url(synopsis.png) no-repeat 0px -8px;
 }
 
-#synopsis p.caption.collapser {
+#synopsis details[open] > summary {
   background: url(synopsis.png) no-repeat -64px -8px;
 }
 
-#synopsis p.caption.expander {
-  background: url(synopsis.png) no-repeat 0px -8px;
-}
-
 #synopsis ul {
   height: 100%;
   overflow: auto;