diff --git a/common/lib/xmodule/xmodule/html_module.py b/common/lib/xmodule/xmodule/html_module.py
index a6ec33e08c..216b63a12e 100644
--- a/common/lib/xmodule/xmodule/html_module.py
+++ b/common/lib/xmodule/xmodule/html_module.py
@@ -17,6 +17,9 @@ log = logging.getLogger("mitx.courseware")
class HtmlModule(XModule):
+ js = {'coffee': [resource_string(__name__, 'js/src/html/display.coffee')]}
+ js_module_name = "HTMLModule"
+
def get_html(self):
return self.html
diff --git a/common/lib/xmodule/xmodule/js/src/capa/display.coffee b/common/lib/xmodule/xmodule/js/src/capa/display.coffee
index 7376418dff..3b45723ae5 100644
--- a/common/lib/xmodule/xmodule/js/src/capa/display.coffee
+++ b/common/lib/xmodule/xmodule/js/src/capa/display.coffee
@@ -26,6 +26,13 @@ class @Problem
@$('section.action input.show').click @show
@$('section.action input.save').click @save
+ # Collapsibles
+ @$('.longform').hide();
+ @$('.shortform').append('See full output');
+ @$('.collapsible section').hide();
+ @$('.full').click @toggleFull
+ @$('.collapsible header a').click @toggleHint
+
# Dynamath
@$('input.math').keyup(@refreshMath)
@$('input.math').each (index, element) =>
@@ -333,6 +340,17 @@ class @Problem
element.CodeMirror.save() if element.CodeMirror.save
@answers = @inputs.serialize()
+ toggleFull: (event) =>
+ $(event.target).parent().siblings().slideToggle()
+ $(event.target).parent().parent().toggleClass('open')
+ text = $(event.target).text() == 'See full output' ? 'Hide output' : 'See full output'
+ $(this).text(text)
+
+ toggleHint: (event) =>
+ event.preventDefault()
+ $(event.target).parent().siblings().slideToggle()
+ $(event.target).parent().parent().toggleClass('open')
+
inputtypeSetupMethods:
'text-input-dynamath': (element) =>
diff --git a/common/lib/xmodule/xmodule/js/src/html/display.coffee b/common/lib/xmodule/xmodule/js/src/html/display.coffee
new file mode 100644
index 0000000000..05e2ddab28
--- /dev/null
+++ b/common/lib/xmodule/xmodule/js/src/html/display.coffee
@@ -0,0 +1,26 @@
+class @HTMLModule
+
+ constructor: (@element) ->
+ @el = $(@element)
+ @setCollapsibles()
+
+ $: (selector) ->
+ $(selector, @el)
+
+ setCollapsibles: =>
+ $('.longform').hide();
+ $('.shortform').append('See full output');
+ $('.collapsible section').hide();
+ $('.full').click @toggleFull
+ $('.collapsible header a').click @toggleHint
+
+ toggleFull: (event) =>
+ $(event.target).parent().siblings().slideToggle()
+ $(event.target).parent().parent().toggleClass('open')
+ text = $(event.target).text() == 'See full output' ? 'Hide output' : 'See full output'
+ $(this).text(text)
+
+ toggleHint: (event) =>
+ event.preventDefault()
+ $(event.target).parent().siblings().slideToggle()
+ $(event.target).parent().parent().toggleClass('open')
\ No newline at end of file
diff --git a/lms/templates/problem.html b/lms/templates/problem.html
index c2e35bc3e4..83fc18c0f6 100644
--- a/lms/templates/problem.html
+++ b/lms/templates/problem.html
@@ -30,36 +30,4 @@
% endif
-
-
-<%block name="js_extra">
-
-%block>
+
\ No newline at end of file