Add js to the problem and move around that css and js to accomodate Tonys new HTML Structure

common/lib/xmodule/xmodule/css/capa/display.scss

@@ -453,17 +453,21 @@ section.problem {
       }
     }
 
-    .longform, .shortform {
+    > section {
       border: 1px solid #ddd;
-      padding: 9px;
+      padding: 9px 9px 20px;
       margin-bottom: 10px;
       background: #FFF;
+      position: relative;
       @include box-shadow(inset 0 0 0 1px #eee);
       @include border-radius(3px);
 
       p:last-of-type {
         margin-bottom: 0;
       }
+
+      .shortform {
+        margin-bottom: .6em;
       }
 
       a.full {
@@ -476,14 +480,6 @@ section.problem {
         background: #F3F3F3;
         @include box-sizing(border-box);
       }
-
-    .longform {
-      position: relative;
-      padding-bottom: 20px;
-    }
-
-    .longform-header {
-      margin-bottom: .6em;
     }
   }
 }

lms/templates/problem.html

@@ -32,3 +32,27 @@
   </section>
 </section>
 
+<%block name="js_extra">
+<script type="text/javascript" charset="utf-8">
+  $(function(){
+      // this should be brought back into problems
+      $('.longform').hide();
+      $('.shortform').append('<a href="#" class="full">See full output</a>');
+
+      $('.full').click(function() {
+        $(this).parent().siblings().slideToggle();
+        $(this).parent().parent().toggleClass('open');
+        var text = $(this).text() == 'See full output' ? 'Hide output' : 'See full output';
+        $(this).text(text);
+        return false;
+      });
+
+      $('.collapsible section').hide()
+      $('.collapsible header a').click(function() {
+        $(this).parent().siblings().slideToggle();
+        $(this).parent().parent().toggleClass('open');
+        return false
+      });
+    });
+</script>
+</%block>