Steelman table hidden behind a toggle button

2 files changed, 48 insertions, 0 deletions

diff --git a/project/assets/css/steelman.css b/project/assets/css/steelman.css
index 5b6b5c9..d0f2c2a 100644
--- a/project/assets/css/steelman.css
+++ b/project/assets/css/steelman.css
@@ -1,5 +1,44 @@
 
 
+section.accordian {
+    margin: 1em 2em 2em 2em;
+}
+
+
+.accordian > input[name="collapse"] {
+    display: none;
+}
+
+
+.accordian .hidden_content {
+    overflow: hidden;
+    height: 0;
+}
+
+
+.accordian label {
+    color: #ffffff;
+    cursor: pointer;
+    font-weight: normal;
+    padding: 0.5em;
+    background: #808080;
+}
+
+
+.accordian label:hover,
+.accordian label:focus {
+    color: #ffffff;
+    background: #000000;
+}
+
+
+.accordian > input[name="collapse"]:checked ~ .hidden_content {
+    height: auto;
+}
+
+
+
+
 table {
     margin: 2em auto 2em auto;
     max-width: 60em;
diff --git a/project/templates/steelman.html b/project/templates/steelman.html
index 4c0d209..bb61548 100644
--- a/project/templates/steelman.html
+++ b/project/templates/steelman.html
@@ -223,6 +223,12 @@ considered meet that requirement on the right. Some explanatory notes are includ
 <p>Note that due to the standardisation issues each of these languages has, a (fortunately quite low) number of these
 turned out to be educated guesses. Fairness was the goal, but nonetheless reader discretion is advised.</p>
 
+
+<section class="accordian">
+    <input type="checkbox" name="collapse" id="handle1">
+    <label for="handle1">Toggle Appendix Table</label>
+    <div class="hidden_content">
+
 <table id="appendix">
     <tr>
         <th style="width: 30em">Requirement</th>
@@ -2313,6 +2319,9 @@ turned out to be educated guesses. Fairness was the goal, but nonetheless reader
     </tr>
 </table>
 
+    </div>
+</section>
+
 {% endblock %}