Refactor sock HTML to have text in Mako template

cms/static/js/sock.js

@@ -3,12 +3,22 @@ require(["domReady", "jquery", "jquery.smoothScroll"],
         var toggleSock = function (e) {
             e.preventDefault();
 
-            var $btnLabel = $(this).find('.copy');
+            var $btnShowSockLabel = $(this).find('.copy-show');
+            var $btnHideSockLabel = $(this).find('.copy-hide');
             var $sock = $('.wrapper-sock');
             var $sockContent = $sock.find('.wrapper-inner');
 
-            $sock.toggleClass('is-shown');
-            $sockContent.toggle('fast');
+            if ($sock.hasClass('is-shown')) {
+                $sock.removeClass('is-shown');
+                $sockContent.hide('fast');
+                $btnHideSockLabel.removeClass("is-shown").addClass("is-hidden");
+                $btnShowSockLabel.removeClass("is-hidden").addClass("is-shown");
+            } else {
+                $sock.addClass('is-shown');
+                $sockContent.show('fast');
+                $btnHideSockLabel.removeClass("is-hidden").addClass("is-shown");
+                $btnShowSockLabel.removeClass("is-shown").addClass("is-hidden");
+            }
 
             $.smoothScroll({
                 offset: -200,
@@ -17,12 +27,6 @@ require(["domReady", "jquery", "jquery.smoothScroll"],
                 scrollElement: null,
                 scrollTarget: $sock
             });
-
-            if ($sock.hasClass('is-shown')) {
-                $btnLabel.text(gettext('Hide Studio Help'));
-            } else {
-                $btnLabel.text(gettext('Looking for Help with Studio?'));
-            }
         };
 
         domReady(function () {

cms/templates/widgets/sock.html

@@ -4,7 +4,10 @@
 <div class="wrapper-sock wrapper">
   <ul class="list-actions list-cta">
     <li class="action-item">
-      <a href="#sock" class="cta cta-show-sock"><i class="icon-question-sign"></i> <span class="copy">${_("Looking for help with {studio_name}?").format(studio_name=settings.STUDIO_NAME)}</span></a>
+      <a href="#sock" class="cta cta-show-sock"><i class="icon-question-sign"></i>
+        <span class="copy-show is-shown">${_("Looking for help with {studio_name}?").format(studio_name=settings.STUDIO_NAME)}</span>
+        <span class="copy-hide is-hidden">${_("Hide {studio_name} Help").format(studio_name=settings.STUDIO_NAME)}</span>
+      </a>
     </li>
   </ul>