6 files changed, 73 insertions, 17 deletions
diff --git a/html/haddock-util.js b/html/haddock-util.js
index 372fd0e8..155ee08f 100644
--- a/html/haddock-util.js
+++ b/html/haddock-util.js
@@ -1,17 +1,26 @@
 // Haddock JavaScript utilities
-function toggle(button,id)
+
+function makeClassToggle(cOn, cOff)
+{
+  var rOn = new RegExp('\\b'+cOn+'\\b');
+  var rOff = new RegExp('\\b'+cOff+'\\b');
+    
+  return function(e, a) {
+    var c = e.className;
+    if (a == null) { a = rOff.test(c); }
+    if (a) { c = c.replace(rOff, cOn); }
+    else   { c = c.replace(rOn, cOff); }
+    e.className = c;
+  }
+}
+
+toggleClassShow = makeClassToggle("show", "hide");
+toggleClassCollapser = makeClassToggle("collapser", "expander");
+
+function toggleSection(toggler,id)
 {
-   var n = document.getElementById(id).style;
-   if (n.display == "none")
-   {
-    button.src = "minus.gif";
-    n.display = "block";
-   }
-   else
-   {
-    button.src = "plus.gif";
-    n.display = "none";
-   }
+  toggleClassShow(document.getElementById(id))
+  toggleClassCollapser(toggler);
 }
 
 
@@ -172,7 +181,6 @@ function resetStyle() {
 
 function styleMenu(show) {
   var m = document.getElementById('style-menu');
-  if (show == null) { show = m.className == "hide"; }
-  m.className = show ? "show" : "hide";
+  toggleClassShow(m, show);
 }
 
diff --git a/html/nhaddock.css b/html/nhaddock.css
index 393662ff..f671a170 100644
--- a/html/nhaddock.css
+++ b/html/nhaddock.css
@@ -74,6 +74,18 @@ ul.links li a { padding: 5px 10px; }
 .show { display: inherit; }
 .clear { clear: both; }
 
+.collapser {
+  background: url(minus.gif) no-repeat 0 0.4em;
+}
+.expander {
+  background: url(plus.gif) no-repeat 0 0.4em;
+}
+.collapser, .expander {
+  padding-left: 14px;
+  margin-left: -14px;
+  cursor: pointer;
+}
+
 pre {
   padding: 0.5em;
   margin: 0.5em 5em 0.5em 3em;
diff --git a/html/shaddock.css b/html/shaddock.css
index 4af9b94b..52215f93 100644
--- a/html/shaddock.css
+++ b/html/shaddock.css
@@ -142,6 +142,17 @@ ul.links li {
 
 .hide {	display: none; }
 .show { }
+.collapser {
+  background: url(minus.gif) no-repeat 0 17px;
+}
+.expander {
+  background: url(plus.gif) no-repeat 0 17px;
+}
+.subs .collapser, .subs .expander {
+  padding-left: 14px;
+  margin-left: -14px;
+  cursor: pointer;
+}
 
 /* Captions and Headers */
 
diff --git a/html/thaddock.css b/html/thaddock.css
index 102712f5..d92c269b 100644
--- a/html/thaddock.css
+++ b/html/thaddock.css
@@ -227,6 +227,17 @@ dd {
 
 .hide {	display: none; }
 .show { }
+.collapser {
+  background: url(minus.gif) no-repeat 0 1.3em;
+}
+.expander {
+  background: url(plus.gif) no-repeat 0 1.3em;
+}
+.collapser, .expander {
+  padding-left: 14px;
+  margin-left: -14px;
+  cursor: pointer;
+}
 
 .top {
     margin:0.4em 0 0 2em;
diff --git a/html/xhaddock.css b/html/xhaddock.css
index ee493d51..35f4b469 100644
--- a/html/xhaddock.css
+++ b/html/xhaddock.css
@@ -100,6 +100,16 @@ ul.links li {
 
 .hide {	display: none; }
 .show { }
+.collapser {
+  background: url(minus.gif) no-repeat 0 0.3em;
+}
+.expander {
+  background: url(plus.gif) no-repeat 0 0.3em;
+}
+.collapser, .expander {
+  padding-left: 14px;
+  cursor: pointer;
+}
 
 #package-header {
 	color: #ffffff;
diff --git a/src/Haddock/Backends/Xhtml/Layout.hs b/src/Haddock/Backends/Xhtml/Layout.hs
index 499d058a..3535ba0e 100644
--- a/src/Haddock/Backends/Xhtml/Layout.hs
+++ b/src/Haddock/Backends/Xhtml/Layout.hs
@@ -158,10 +158,14 @@ subFields = divSubDecls "fields" "Fields" . subDlist
 
 
 subInstances :: String -> [SubDecl] -> Html
-subInstances id_ = divSubDecls "instances" instCaption . instTable
+subInstances id_ = maybe noHtml wrap . instTable
   where
-    instCaption = collapsebutton id_ +++ " Instances"
-    instTable = fmap (thediv ! [identifier id_] <<) . subTable
+    wrap = (subSection <<) . (subCaption +++)
+    instTable = fmap (thediv ! [identifier id_, theclass "show"] <<) . subTable
+    subSection = thediv ! [theclass $ "subs instances"]
+    subCaption = paragraph ! [theclass cs, onclick js] << "Instances"
+    cs = "caption collapser"
+    js = "toggleSection(this,'" ++ id_ ++ "')"
 
 
 subMethods :: [Html] -> Html