fixed large collapsible text and triple toggle

lms/static/sass/course/courseware/_courseware.scss

@@ -52,6 +52,14 @@ div.course-wrapper {
         margin-bottom: 15px;
         padding: 0 0 15px;
 
+        .collapsible {
+          header {
+            margin-bottom: 0;
+            padding-bottom: 0;
+            font-size: 16px;
+          }
+        }
+
         header {
           @extend h1.top-header;
           @include border-radius(0 4px 0 0);

lms/templates/problem.html

@@ -34,6 +34,8 @@
 
 <%block name="js_extra">
 <script type="text/javascript" charset="utf-8">
+  var collapsibleSet;
+  
   $(function(){
       // this should be brought back into problems
       $('.longform').hide();
@@ -47,12 +49,16 @@
         return false;
       });
 
-      $('.collapsible section').hide()
-      $('.collapsible header a').click(function() {
-        $(this).parent().siblings().slideToggle();
-        $(this).parent().parent().toggleClass('open');
-        return false
-      });
+      if(!collapsibleSet) {
+        collapsibleSet = true;
+        $('.collapsible section').hide();
+        $('.collapsible header a').bind('click', toggleHint);
+        function toggleHint(e) {
+          $(this).parent().siblings().slideToggle();
+          $(this).parent().parent().toggleClass('open');
+          return false;
+        }
+      }      
     });
 </script>
 </%block>