Finished styling the collapsible panel for troubleshooting.

diff --git a/css/main.css b/css/main.css
index 77c24931f76394a69c3556ff5666b8114ea1bbce..ed199f2cc57ffa5d265d77ebc625f75729464d52 100644 (file)
--- a/css/main.css
+++ b/css/main.css
@@ -283,31 +283,67 @@ a {
                color: #94b3e2;
 }
 
+/* Troubleshooting panel
+*/
+
 .troubleshooting {
 /*             border-left: 8px solid #ff9b12; */
                margin-top: .8em;
 }
 
 .troubleshooting > h4 {
+               display: inline-block;
+               cursor: pointer;
                letter-spacing: 2px;
-               padding: .25em 0;
+               padding: .25em .5em;
                color: #2f5faa;
-               cursor: pointer;
                opacity: .5;
+               border: 1px solid #5f8dd3;
+               border-radius: 3px;
 }
 
-.troubleshooting h4:hover {
-               opacity: .8;
+.troubleshooting > h4:hover,
+.troubleshooting > h4.expanded {
+               opacity: 1;
 }
 
-.main dt, 
-.main dd,
-.troubleshooting dt, 
-.troubleshooting dd {
+.troubleshooting > h4.expanded {
+               border-bottom: 0;
+               border-radius: 3px 3px 0 0;
 }
 
-#footer h4 {
-               margin-bottom: 1em;
+
+.troubleshooting > h4:after {
+               content:' ▾';
+               display: inline-block;
+    line-height: 1;
+               padding: 0 0.2em;
+    vertical-align: top;
+}
+
+.troubleshooting > h4.expanded:after {
+               content:' ▴';
+               display: inline-block;
+    line-height: 1;
+               padding: 0 0.2em;
+    vertical-align: top;
+}
+
+.troubleshooting dl {
+               display: none;
+               padding: .5em;
+               border: 1px solid #5f8dd3;
+               border-radius: 0 3px 3px;
+}
+
+.main dt,
+.troubleshooting dt {
+               margin-top: 1em;
+}
+
+.main dt:first-child,
+.troubleshooting dt:first-child {
+               margin-top: 0;
 }
 
 /* FSF Introduction, before the header +  Newsletter form
@@ -369,6 +405,13 @@ a {
                outline: none;
 }
 
+/* Footer
+*/
+
+#footer h4 {
+               margin-bottom: 1em;
+}
+
 
 /* ==========================================================================
    Media Queries
@@ -407,7 +450,7 @@ a {
                }
 
                .nav > div {
-                       overflow: auto;
+                       overflow: hidden;
                        position: relative;
                        padding: 0.35em 0 0;
                }

diff --git a/js/scripts.js b/js/scripts.js
index 39cb09d13b241c68fab8b5e20f463d979c4d4992..d0a1f404e8951c06fafd4f347a99ffa83f297e09 100644 (file)
--- a/js/scripts.js
+++ b/js/scripts.js
@@ -1,9 +1,10 @@
 
 $(document).ready( function() {
-         $('.troubleshooting > h4').click( function() {
-                               $(this).toggleClass("highlighted");
-             $('.troubleshooting dl').slideToggle('slow');
-         });
-});
 
+         $(".troubleshooting > h4").click(function() {
+                               $(this).toggleClass("expanded");
+                               $(this).next("dl").slideToggle(400);
+               });
+
+});