Adding a bunch of collapsed templates and javascript to load them.

apps/openassessment/templates/openassessmentblock/oa_peer_assessment_collapsed.html

+{%  extends "openassessmentblock/oa_peer_assessment.html" %}
+{% block body %}
+{% endblock %}
+

apps/openassessment/templates/openassessmentblock/oa_response_collapsed.html

+{%  extends "openassessmentblock/oa_response.html" %}
+{% block body %}
+{% endblock %}
\ No newline at end of file

apps/openassessment/templates/openassessmentblock/oa_self_assessment.html

+<!-- TEMPLATE: self evaluation -->
+
+
+<!-- NOTES:
+
+ * class of is--unavailable is added when step is not available
+ * each .self-assessment item needs a unique id attribute formatted as #self-assessment--###
+ * individual rubric questions' answers need specific id attributes in several places
+
+ -->
+
+
+<!-- CASE: default/not started -->
+<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment">
+    <header class="step__header">
+        <h2 class="step__title">
+            <span class="step__counter"></span>
+            <span class="wrapper--copy">
+                <span class="step__title__label">Evaluate Your Response</span>
+                <span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span>
+            </span>
+        </h2>
+
+        <span class="step__status">
+          <span class="step__status__label">This step's status:</span>
+          <span class="step_status_value">Incomplete</span>
+        </span>
+    </header>
+    {% block body %}
+    <div class="step--content">
+        <article class="self-assessment" id="self-assessment">
+            <header class="self-assessment__header">
+                <h3 class="self-assessment__title">Your Submitted Response</h3>
+            </header>
+
+            <!-- ?: markup validating/copy cleaning upon submission -->
+            <div class="self-assessment__response">
+                {{ self_submission.answer }}
+            </div>
+
+            <form id="self-assessment--001__assessment" class="self-assessment__assessment" method="post">
+                <fieldset class="assessment__fields">
+                    <legend class="assessment__instruction">{{ rubric_instructions }}</legend>
+
+                    <ol class="list list--fields assessment__rubric">
+                        {% for criterion in rubric_criteria %}
+                            <!-- individual rubric question (radio-based choice) -->
+                            <li class="field field--radio is--required assessment__rubric__question" id="assessment__rubric__question--{{ criterion.name }}">
+                                <h4 class="question__title">
+                                    {{ criterion.instructions }}
+                                    <span class="label--required">* <span class="sr">(Required)</span></span>
+                                </h4>
+
+                                <ol class="question__answers">
+                                    {% for value, text in criterion.options %}
+                                        <li class="answer">
+                                            <div class="wrapper--input">
+                                                <input type="radio" name="assessment__rubric__question--{{ criterion.name }}" id="assessment__rubric__question--{{ criterion.name }}--01" class="answer__value" value="answer--001__option--01 - Very Well" />
+                                                <label for="assessment__rubric__question--001__option--01" class="answer__label">({{ value }}) {{ text }}</label>
+                                            </div>
+                                            <span class="answer__tip">TODO: Criterion Instructions</span>
+                                        </li>
+                                    {% endfor %}
+                                </ol>
+                            </li>
+                        {% endfor %}
+
+                        <!-- individual rubric question (text) -->
+                        <li class="field field--textarea assessment__rubric__question" id="assessment__rubric__question--004">
+                            <label for="assessment__rubric__question--004__value">Please provide any other feedback you have around this response</label>
+                            <textarea id="assessment__rubric__question--004__value" placeholder="I felt this response was..."></textarea>
+                        </li>
+                    </ol>
+                </fieldset>
+
+                <ul class="list list--actions">
+                    <li class="list--actions__item">
+                        <button type="submit" id="self-assessment--001__assessment__submit" class="action action--submit">Submit your assessment</button>
+                    </li>
+                </ul>
+            </form>
+        </article>
+    </div>
+    {% endblock %}
+</li>

apps/openassessment/templates/openassessmentblock/oa_self_assessment_collapsed.html

+{%  extends "openassessmentblock/oa_self_assessment.html" %}
+{% block body %}
+{% endblock %}
+

apps/openassessment/templates/openassessmentblock/peer/oa_peer_assessment.html

@@ -37,7 +37,6 @@
         </span>
         {% endblock %}
     </header>
-
     {% block body %}
     <div class="step__instruction">
         <p>Please read and evaluate the following response from one of your peers in the course.</p>

apps/openassessment/xblock/static/js/src/oa_base.js

@@ -101,7 +101,7 @@ function OpenAssessmentBlock(runtime, element) {
                         url: renderPeerUrl,
                         dataType: "html",
                         success:  function(data) {
-                            render_peer_assessment(data)
+                            $('#openassessment__peer-assessment', element).replaceWith(data);
                         }
                     });
                 }
@@ -122,6 +122,22 @@ function OpenAssessmentBlock(runtime, element) {
 
         $.ajax({
             type: "POST",
+            url: renderPeerCollapseUrl,
+            success:  function(data) {
+                $('#openassessment__peer-assessment', element).replaceWith(data);
+            }
+        });
+
+        $.ajax({
+            type: "POST",
+            url: renderSelfCollapseUrl,
+            success:  function(data) {
+                $('#openassessment__self-assessment', element).replaceWith(data);
+            }
+        });
+
+        $.ajax({
+            type: "POST",
             url: renderPeerUrl,
             success:  function(data) {
                 $(peerListItem, element).replaceWith(data);