Add expand/collapse icons, tweak sidebar style

5 files changed, 36 insertions, 15 deletions

diff --git a/_layouts/default.html b/_layouts/default.html
index 71ba56d..84550d5 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -47,22 +47,27 @@ sidebar_cats:
 
       <div id="content" class="site">
         <div id="guides">
-          <div class="guide wikistyle">
+          <div class="guide">
             <div class="main">
               <h1>{{ page.title }}</h1>
 
-              {{ content }}
+              <div class="wikistyle">
+                {{ content }}
+              </div>
             </div>
 
             <div class="sidebar">
+              <ul>
               {% for cat in (page.sidebar_cats) %}
-                <h3 id="{{cat}}">{{ cat | capitalize }}</h3>
-                <dl id="{{cat}}">
-                  {% for post in site.posts reversed %}{% if post.categories contains cat %}
-                    <dt><a href="{{ post.url }}">{{ post.title }}</a></dt>
-                    <dd>{{ post.description }}</dd>
-                  {% endif %}{% endfor %}
-                </dl>
+                <li id="{{cat}}">
+                  <h3>{{ cat | capitalize }}</h3>
+                  <dl id="{{cat}}">
+                    {% for post in site.posts reversed %}{% if post.categories contains cat %}
+                      <dt><a href="{{ post.url }}">{{ post.title }}</a></dt>
+                      <dd>{{ post.description }}</dd>
+                    {% endif %}{% endfor %}
+                  </dl>
+                </li>
               {% endfor %}
 
             </div>
diff --git a/css/style.css b/css/style.css
index 1e93a47..4dcaa9a 100755
--- a/css/style.css
+++ b/css/style.css
@@ -5,14 +5,30 @@
 .category_index dt { margin-left: 0.5em !important; }
 .category_index dd { margin-left: 1.5em !important; }
 
+#guides .guide .sidebar h3 {
+  color: black;
+  cursor: pointer;
+}
+#guides .guide .sidebar ul { margin-left: 0; }
+#guides .guide .sidebar ul li {
+  padding-left: 14px;
+  background: white url(/images/expand.png) -2px 2px no-repeat;
+  margin: .2em 0;
+}
+#guides .guide .sidebar ul li.expanded { background: white url(/images/collapse.png) -2px 2px no-repeat; }
+
 .sidebar dl {
   display: none;
-  margin-bottom: 0;
+  margin-bottom: 1em;
 }
 
+.sidebar dt { font-weight: bold; }
+.sidebar dd { margin-bottom: 0.5em; }
+
 pre.terminal {
   padding: 1em !important;
   background: #444 !important;
   color: white !important;
   font-size: 0.9em !important;
 }
+
diff --git a/images/collapse.png b/images/collapse.png
new file mode 100644
index 0000000..0c7f37b
--- /dev/null
+++ b/images/collapse.png
diff --git a/images/expand.png b/images/expand.png
new file mode 100644
index 0000000..19862cf
--- /dev/null
+++ b/images/expand.png
diff --git a/js/main.js b/js/main.js
index f4772ea..d400b79 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,14 +1,14 @@
 $(function(){
   if (typeof main_category == "undefined") {
-    $(".sidebar dl:first").slideDown(2)
+    $(".sidebar dl:first").slideDown("slow").parent().addClass("expanded")
   } else {
-    $(".sidebar dl#" + main_category).slideDown(2)
+    $(".sidebar dl#" + main_category).slideDown("slow").parent().addClass("expanded")
   }
 
   $(".sidebar h3").click(function(){
-    if ($(".sidebar dl#" + this.id).is(":hidden")) {
-      $(".sidebar dl:visible").slideUp("fast")
-      $(".sidebar dl#" + this.id).show("fast")
+    if ($(this).siblings("dl").is(":hidden")) {
+      $(".sidebar dl:visible").slideUp("fast").parent().removeClass("expanded")
+      $(this).siblings("dl").slideDown("fast").parent().addClass("expanded")
     }
   })
 })
\ No newline at end of file