Use jQuery UI's icon classes

2 files changed, 16 insertions, 4 deletions

diff --git a/css/style.css b/css/style.css
index f6ef180..d8dc77b 100755
--- a/css/style.css
+++ b/css/style.css
@@ -11,12 +11,10 @@
 /*********************/
 
 #guides .guide .sidebar h3 {
-  padding: 4px 4px 4px 14px;
-  background: white url(/images/expand.png) -2px 6px no-repeat;
+  padding: 4px;
   margin: .2em 0;
   cursor: pointer;
 }
-#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 { padding: 0 0.5em 0.5em 0.5em; }
@@ -25,6 +23,17 @@
   margin-top: 0.5em;
 }
 
+.ui-icon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background-color: white;
+  background-position: -2px 2px;
+  background-repeat: no-repeat;
+}
+.ui-icon-triangle-expand { background-image: url(/images/expand.png); }
+.ui-icon-triangle-collapse { background-image: url(/images/collapse.png); }
+
 
 /**********************/
 /*      Pre/code      */
diff --git a/js/main.js b/js/main.js
index 248d20d..863e5b2 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,3 +1,6 @@
 $(function(){
-  $(".sidebar").accordion({ header: 'h3', autoHeight: false, navigation: true, navigationFilter: function() {if (typeof main_category != "undefined") {return this.id == main_category}} });
+  $(".sidebar").accordion({
+    header: 'h3', autoHeight: false,
+    icons: {'header': 'ui-icon-triangle-expand', 'headerSelected': 'ui-icon-triangle-collapse'},
+    navigation: true, navigationFilter: function() {if (typeof main_category != "undefined") {return this.id == main_category}} });
 })
\ No newline at end of file