--- a/talosnames/templates/index.html	Mon Jul 23 13:57:14 2012 -0700
+++ b/talosnames/templates/index.html	Mon Jul 23 14:50:55 2012 -0700
@@ -44,6 +44,10 @@
 background-color: red;
 }
 
+.fold {
+color: blue;
+}
+
 </style>
 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 
@@ -59,6 +63,7 @@
 <script>
 $(document).ready(function() {
 
+// color paint/chrome boxes appropriately
 function mark_boolean(selector) {
 $(selector).each(function() {
 var text = $(this).text();
@@ -69,8 +74,6 @@
 }
 });
 }
-
-// color paint/chrome boxes appropriately
 mark_boolean('td.paint');
 mark_boolean('td.chrome');
 
@@ -82,6 +85,20 @@
 }
 });
 
+// add a hide/unhide button
+$('div.testname').after('<a class="fold">[+]</a>');
+$('dl.testattributes').hide();
+$('.fold').click(function() {
+var text = $(this).text();
+if (text == '[+]') {
+$(this).next('.testattributes').show();
+$(this).text('[-]');
+} else if (text == '[-]') {
+$(this).next('.testattributes').hide();
+$(this).text('[+]');
+}
+});
+
 });
 </script>
 </head>
@@ -112,8 +129,9 @@
 
       {{for test in sorted(tests[suite].keys())}}
       <tr>
-        <td><div class="header">{{test}}</div>
-          <dl>
+        <td>
+          <div class="header testname">{{test}}</div>
+          <dl class="testattributes">
             {{for attr in sorted(tests.get(suite, {})[test].keys())}}
             <dt>{{attr}}</dt>
             <dd>{{tests[suite][test][attr]}}</dd>