use hide/show labels for pod toggle

Author: haarg

root/source.html

@@ -45,7 +45,7 @@
     </div>
   </li>
   <% IF module.sloc > 0 %>
-  <li><div><button class="btn-link" onclick="togglePod()"><i class="fa fa-exchange fa-fw black"></i>Toggle pod</button></div></li>
+  <li><div><button class="btn-link pod-toggle" onclick="togglePod()"><i class="fa fa-exchange fa-fw black"></i><span class="hide-pod">Hide</span><span class="show-pod">Show</span> Pod</button></div></li>
   <% END %>
   <li class="nav-header">Info</li>
   <li><% module.sloc %> lines of code</li>

root/static/js/syntaxhighlighter.js

@@ -159,4 +159,5 @@ $(function () {
 
 function togglePod() {
     $('.syntaxhighlighter').toggleClass('pod-hidden');
+    $('.pod-toggle').toggleClass('pod-hidden');
 }

root/static/less/syntaxhighlighter.less

@@ -25,6 +25,18 @@ pre code {
     content: none !important;
 }
 
-.pod-hidden .pod-line {
+.pod-hidden {
+    .pod-line {
+        display: none;
+    }
+    .hide-pod {
+        display: none;
+    }
+    .show-pod {
+        display: inline;
+    }
+}
+
+.show-pod {
     display: none;
 }