From bcf35a0d86c7843a58dbeef7cb9e52051891568d Mon Sep 17 00:00:00 2001
From: Ana Isabel Carvalho <ana.isabelc@gmail.com>
Date: Wed, 4 Jun 2014 11:27:43 +0100
Subject: [PATCH] Finished styling the collapsible panel for troubleshooting.

---
 css/main.css  | 65 ++++++++++++++++++++++++++++++++++++++++++---------
 js/scripts.js | 11 +++++----
 2 files changed, 60 insertions(+), 16 deletions(-)

diff --git a/css/main.css b/css/main.css
index 77c2493..ed199f2 100644
--- 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 39cb09d..d0a1f40 100644
--- 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);
+		});
+
+});
 
-- 
2.25.1