Rework sidebar to use jQuery UI

3 files changed, 24 insertions, 33 deletions

diff --git a/_layouts/default.html b/_layouts/default.html
index ad7797f..2f6307b 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -20,6 +20,7 @@ sidebar_cats:
     <link rel="stylesheet" href="/css/print.css" type="text/css" media="print">
 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
     <script type="text/javascript" src="/js/main.js"></script>
   </head>
 
@@ -58,19 +59,15 @@ sidebar_cats:
             </div>
 
             <div class="sidebar">
-              <ul>
               {% for cat in (page.sidebar_cats) %}
-                <li id="{{cat}}">
-                  <h3>{{ cat | capitalize }}</h3>
-                  <dl id="{{cat}}">
+                <h3>{{ cat | capitalize }}</h3>
+                  <dl>
                     {% for post in site.posts reversed %}{% if post.categories contains cat %}
-                      <dt><a href="{{ post.url }}">{{ post.title }}</a></dt>
+                      <dt><a href="{{ post.url }}" id="{{ cat }}">{{ post.title }}</a></dt>
                       <dd>{{ post.description }}</dd>
                     {% endif %}{% endfor %}
                   </dl>
-                </li>
               {% endfor %}
-
             </div>
           </div>
         </div>
diff --git a/css/style.css b/css/style.css
index bdd0845..f6ef180 100755
--- a/css/style.css
+++ b/css/style.css
@@ -5,25 +5,30 @@
 .category_index dt { margin-left: 0.5em !important; }
 .category_index dd { margin-left: 1.5em !important; }
 
+
+/*********************/
+/*      Sidebar      */
+/*********************/
+
 #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;
+  padding: 4px 4px 4px 14px;
+  background: white url(/images/expand.png) -2px 6px no-repeat;
   margin: .2em 0;
+  cursor: pointer;
 }
-#guides .guide .sidebar ul li.expanded { background: white url(/images/collapse.png) -2px 2px no-repeat; }
+#guides .guide .sidebar h3.ui-state-active { background: white url(/images/collapse.png) -2px 6px no-repeat; }
+#guides .guide .sidebar h3:focus { outline: none; }
 
-.sidebar dl {
-  display: none;
-  margin-bottom: 1em;
+.sidebar dl { padding: 0 0.5em 0.5em 0.5em; }
+.sidebar dt {
+  font-weight: bold;
+  margin-top: 0.5em;
 }
 
-.sidebar dt { font-weight: bold; }
-.sidebar dd { margin-bottom: 0.5em; }
+
+/**********************/
+/*      Pre/code      */
+/**********************/
 
 pre.terminal {
   padding: 1em !important;
@@ -32,4 +37,4 @@ pre.terminal {
   font-size: 0.9em !important;
 }
 
-code {white-space: nowrap;}
\ No newline at end of file
+code {white-space: nowrap;}
diff --git a/js/main.js b/js/main.js
index 7759170..248d20d 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,14 +1,3 @@
 $(function(){
-  if (typeof main_category == "undefined") {
-    $(".sidebar dl:first").slideDown("slow").parent().addClass("expanded")
-  } else {
-    $(".sidebar dl#" + main_category).slideDown("slow").parent().addClass("expanded")
-  }
-
-  $(".sidebar li").click(function(){
-    if ($(this).children("dl").is(":hidden")) {
-      $(".sidebar dl:visible").slideUp("fast").parent().removeClass("expanded")
-      $(this).addClass("expanded").children("dl").slideDown("fast")
-    }
-  })
+  $(".sidebar").accordion({ header: 'h3', autoHeight: false, navigation: true, navigationFilter: function() {if (typeof main_category != "undefined") {return this.id == main_category}} });
 })
\ No newline at end of file