Added button to show/hide guided notes and discussions.

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

@@ -14,12 +14,24 @@
   }
 }
 
+.annotatable-toggle {
+  display: block;
+  font-size: $body-font-size;
+}
+
 span.annotatable {
   color: $blue;
   cursor: pointer;
   .annotatable-icon {
     margin: auto 2px auto 4px;
   }
+  &.hide {
+    cursor: none;
+    color: inherit;
+    .annotatable-icon {
+      display: none;
+    }
+  }
 }
 
 .annotatable-icon {
@@ -64,4 +76,7 @@ span.annotatable {
   &.opaque {
     opacity: 0.4;
   }
+  &.hide {
+    display: none;
+  }
 }

common/lib/xmodule/xmodule/js/src/annotatable/display.coffee

@@ -4,6 +4,7 @@ class @Annotatable
     wrapperSelector: '.annotatable-wrapper'
     spanSelector: 'span.annotatable[data-span-id]'
     discussionSelector: '.annotatable-discussion[data-discussion-id]'
+    toggleSelector: '.annotatable-toggle'
  
     constructor: (el) ->
         console.log 'loaded Annotatable' if @_debug
@@ -11,10 +12,14 @@ class @Annotatable
         @init()
 
     init: () ->
+        @hideAnnotations = false
+        @spandata = {}
         @loadSpanData()
         @initEvents()
 
     initEvents: () ->
+        $(@toggleSelector, @el).bind('click', @_bind @onClickToggleAnnotations)
+
         $(@wrapperSelector, @el).delegate(@spanSelector, {
             'click': @_bind @onSpanEvent @onClickSpan
             'mouseenter': @_bind @onSpanEvent @onEnterSpan
@@ -30,6 +35,11 @@ class @Annotatable
     getDiscussionEl: (discussion_id) ->
         $(@discussionSelector, @el).filter('[data-discussion-id="'+discussion_id+'"]')
 
+    onClickToggleAnnotations: (e) ->
+        @hideAnnotations = !@hideAnnotations
+        $(@spanSelector, @el).add(@discussionSelector, @el).toggleClass('hide', @hideAnnotations)
+        $(@toggleSelector, @el).text(if @hideAnnotations then 'Show Annotations' else 'Hide Annotations')
+
     onSpanEvent: (fn) ->
         (e) =>
           span_el = e.currentTarget
@@ -44,6 +54,7 @@ class @Annotatable
             id: discussion_id
             el: discussion_el 
           }
+          if !@hideAnnotations
               fn.call this, span, discussion
 
     onClickSpan: (span, discussion) ->

lms/templates/annotatable.html

@@ -6,6 +6,7 @@
 	  <div class="annotatable-title">${display_name} </div>
 	% endif
 	<div class="annotatable-description">Annotated Reading + Guided Discussion</div>
+	<a href="javascript:void(0)" class="annotatable-toggle">Hide Annotations</a>
 </div>
 
 <div class="annotatable-content">