new show/hide button for inline discussions

lms/static/coffee/src/discussion/discussion_module_view.coffee

@@ -28,14 +28,20 @@ if Backbone?
       @newPostForm.slideUp(300)
 
     toggleDiscussion: (event) ->
+      thisButton = $(event.target).closest('a')
       if @showed
-        @$("section.discussion").hide()
-        $(event.target).html("Show Discussion")
+        @$("section.discussion").slideUp()
+        thisButton.removeClass('shown')
+        thisButton.find('.button-text').html("Show Discussion")
         @showed = false
       else
-        $(event.target).html("Hide Discussion")
+        thisButton.addClass('shown')
+        thisButton.find('.button-text').html("Hide Discussion")
+
+        console.log($(event.target))
+
         if @retrieved
-          @$("section.discussion").show()          
+          @$("section.discussion").slideDown()
           @showed = true
         else
           $elem = $(event.target)

lms/static/sass/_discussion.scss

@@ -1571,16 +1571,33 @@ body.discussion {
 .discussion-module {
   @extend .discussion-body;
   margin: 20px 0;
-  padding: 20px;
+  padding: 20px 20px 28px 20px;
   background: #f6f6f6 !important;
   border-radius: 3px;  
 
   .discussion-show {
-    @include white-button;
     display: block;
     width: 200px;
-    margin: auto;    
+    margin: auto;
+    font-size: 14px;
     text-align: center;
+
+    &.shown {
+      .show-hide-discussion-icon {
+        background-position: 0 0;
+      }
+    }
+
+    .show-hide-discussion-icon {
+      display: inline-block;
+      position: relative;
+      top: 5px;
+      margin-right: 6px;
+      width: 21px;
+      height: 19px;
+      background: url(../images/show-hide-discussion-icon.png) no-repeat;
+      background-position: -21px 0;
+    }
   }
 
   .new-post-btn {
@@ -1590,6 +1607,10 @@ body.discussion {
   section.discussion {
     margin-top: 20px;
 
+    .threads {
+      margin-top: 20px;
+    }
+
     /* Course content p has a default margin-bottom of 1.416em, this is just to reset that */
     .discussion-thread {
       padding: 0;

lms/templates/discussion/_discussion_module.html

@@ -1,5 +1,5 @@
 <%include file="_underscore_templates.html" />
 
 <div class="discussion-module" data-discussion-id="${discussion_id | h}">
-    <a class="discussion-show control-button" href="javascript:void(0)" data-discussion-id="${discussion_id | h}">Show Discussion</a>
+    <a class="discussion-show control-button" href="javascript:void(0)" data-discussion-id="${discussion_id | h}"><span class="show-hide-discussion-icon"></span><span class="button-text">Show Discussion</span></a>
 </div>