Change aside to render as a button which toggle shows

acid/static/html/aside.html.mako

@@ -7,54 +7,56 @@
     data-unknown-class="${unknown_class}"
     data-local-resource-url="${local_resource_url}"
 >
-    <h6>Acid Aside for ${usage_id}</h6>
-    <p>JS init function run:
-        <span class="js-init-run">
-            <i class="${unknown_class}"></i>
-        </span>
-    </p>
-    <p>Resource Url Test:
-        <span class="local-resource-test">
-            <i class="${unknown_class}"></i>
-        </span>
-    </p>
-    <table class='storage-tests'>
-        <tr>
-            <th>Scope</th>
-            <th>Server-side<br>handler_url<br>returned</th>
-            <th>Server-side<br>handler_url<br>succeeded</th>
-            <th>Client-side<br>handler_url<br>returned</th>
-            <th>Client-side<br>handler_url<br>succeeded</th>
-        </tr>
-        % for test in storage_tests:
-            <tr class="scope-storage-test scope-${test['scope']} ${loop.cycle('', 'alt')}"
-                data-handler-url="${test['handler_url']}"
-                data-scope="${test['scope']}"
-                data-value="${test['value']}"
-            >
-                <td>${test['scope']}</td>
-                <td>
-                    <span class="server-storage-test-returned">
-                        <i class="${unknown_class}"></i>
-                    </span>
-                </td>
-                <td>
-                    <span class="server-storage-test-succeeded">
-                        <i class="${unknown_class}"></i>
-                    </span>
-                </td>
-                <td>
-                    <span class="client-storage-test-returned">
-                        <i class="${unknown_class}"></i>
-                    </span>
-                </td>
-                <td>
-                    <span class="client-storage-test-succeeded">
-                        <i class="${unknown_class}"></i>
-                    </span>
-                </td>
+    <button>Acid Aside for ${usage_id}</button>
+    <div>
+        <p>JS init function run:
+            <span class="js-init-run">
+                <i class="${unknown_class}"></i>
+            </span>
+        </p>
+        <p>Resource Url Test:
+            <span class="local-resource-test">
+                <i class="${unknown_class}"></i>
+            </span>
+        </p>
+        <table class='storage-tests'>
+            <tr>
+                <th>Scope</th>
+                <th>Server-side<br>handler_url<br>returned</th>
+                <th>Server-side<br>handler_url<br>succeeded</th>
+                <th>Client-side<br>handler_url<br>returned</th>
+                <th>Client-side<br>handler_url<br>succeeded</th>
             </tr>
-        % endfor
-    </table>
-    <p>Sees Acid DOM: <span class="acid-dom"><i class="${unknown_class}"></i></span></p>
+            % for test in storage_tests:
+                <tr class="scope-storage-test scope-${test['scope']} ${loop.cycle('', 'alt')}"
+                    data-handler-url="${test['handler_url']}"
+                    data-scope="${test['scope']}"
+                    data-value="${test['value']}"
+                >
+                    <td>${test['scope']}</td>
+                    <td>
+                        <span class="server-storage-test-returned">
+                            <i class="${unknown_class}"></i>
+                        </span>
+                    </td>
+                    <td>
+                        <span class="server-storage-test-succeeded">
+                            <i class="${unknown_class}"></i>
+                        </span>
+                    </td>
+                    <td>
+                        <span class="client-storage-test-returned">
+                            <i class="${unknown_class}"></i>
+                        </span>
+                    </td>
+                    <td>
+                        <span class="client-storage-test-succeeded">
+                            <i class="${unknown_class}"></i>
+                        </span>
+                    </td>
+                </tr>
+            % endfor
+        </table>
+        <p>Sees Acid DOM: <span class="acid-dom"><i class="${unknown_class}"></i></span></p>
+    </div>
 </div>

acid/static/js/acid.js

@@ -75,6 +75,10 @@ function AcidAsideBlock(runtime, element, block_element, init_args) {
     AcidBlock.call(this, runtime, element);
     this.block_element = block_element;
     this.test_aside = init_args['test_aside']
+    $(element).find("div > button + div").toggle();
+    $(element).find("div > button").click(
+        function() { $(this).next("div").toggle(); }
+    )
     this.runTests();
 }
 AcidAsideBlock.prototype = Object.create(AcidBlock.prototype)