Making challenges foldable

assets/css/lesson.scss

@@ -136,3 +136,10 @@ ul,
 ol {
   padding-left: 1em;
 }
+
+
+span.fold-unfold {
+    margin-left: 1em;
+    font-size: 95%;
+    opacity: 0.5;
+}

assets/js/lesson.js

 // Make all tables striped by default.
 $("table").addClass("table table-striped");
 
+// Handle foldable challenges (on click and at start)
+$(".challenge").click(function(event) {
+    $(">*:not(h2)", this).toggle(400);
+});
+$(".challenge").each(function() {
+    $(">*:not(h2)", this).toggle();
+    var h2 = $("h2:first", this);
+    h2.append("<span class='fold-unfold'>(click to fold/unfold)</span>");
+});
+
 // Handle searches.
 // Relies on document having 'meta' element with name 'search-domain'.
 function google_search() {