Proper show/hide of help sections.

lib/gollum/frontend/public/css/editbar.css

@@ -8,6 +8,10 @@
   font-size: 13px;
 }
 
+  #editbar .current {
+    display: block !important;
+  }
+
   #editbar .menu {
     overflow: hidden;
     background: white;
@@ -101,7 +105,9 @@
     width: 100%;
     overflow: visible;
     border-top: 1px solid #888;
-    height: 1750px;
+    height: 175px;
+    background-color: #E0EEF7;
+    display: none;
   }
 
     #editbar .sections .toc {
@@ -128,17 +134,13 @@
       background-color: white;
       float: right;
       width: 80%;
-      height: 1750px;
+      height: 175px;
     }
 
       #editbar .sections .page {
         display: none;
       }
 
-      #editbar .sections .page.current {
-        display: block;
-      }
-
       #editbar .sections .pages th {
         color: #999;
         font-weight: bold;
@@ -156,11 +158,11 @@
         color: #bbb;
         padding-left: 1px;
       }
-      
+
       #editbar .sections .pages .shortcodes th {
         text-align: center;
       }
-      
+
       #editbar .sections .pages .shortcodes ul {
         list-style-type: none;
       }

lib/gollum/frontend/public/javascript/gollum.js

@@ -149,11 +149,17 @@ $(function(){
     Gollum.prefix(el, format, 'ol')
   })
 
-  $('#editbar .tab a').click(function() {
+  $('#editbar .tab.help a').click(function() {
     if ($(this).hasClass("open")) {
       $(this).removeClass("open")
+      $('#editbar .sections').slideUp()
     } else {
       $(this).addClass("open")
+      if (!$('#editbar .sections .toc .current').get(0)) {
+        var target = $('#editbar .sections .toc .headers').get(0)
+        sectionItemClick.call(target)
+      }
+      $('#editbar .sections').slideDown()
     }
   })
 

lib/gollum/frontend/templates/editbar.mustache

@@ -24,7 +24,7 @@
       <div class="links gollum">Links</div>
       <div class="images gollum">Images</div>
       <div class="code gollum">Code</div>
-      <div class="formatting current">Formatting</div>
+      <div class="formatting">Formatting</div>
       <div class="lists">Lists</div>
     </div>
     <div class="pages">