Feature: Add hide-able Environment Table

src/layout/css/style.scss

@@ -46,7 +46,6 @@ table {
     border: $border-width solid #e6e6e6;
     vertical-align: top;
   }
-
   tr:nth-child(odd) {
     background-color: #f6f6f6;
   }
@@ -210,6 +209,21 @@ div.media {
   }
 }
 
+#environment-header.collapser h2 {
+  &:hover::after {
+    content: ' (hide details)';
+    @include rowToggle;
+    font-size: $font-size-text;
+  }
+}
+#environment-header.expander h2 {
+  &:hover::after {
+    content: ' (show details)';
+    @include rowToggle;
+    font-size: $font-size-text;
+  }
+}
+
 /*------------------
  * 3. Sorting items
  *------------------*/

src/pytest_html/resources/index.jinja2

@@ -15,7 +15,9 @@
     <h1 id="title"></h1>
     <p>Report generated on {{ date }} at {{ time }} by <a href="https://pypi.python.org/pypi/pytest-html">pytest-html</a>
         v{{ version }}</p>
-    <h2>Environment</h2>
+    <div id="environment-header" class="collapser">
+      <h2>Environment</h2>
+    </div>
     <table id="environment"></table>
     <!-- TEMPLATES -->
       <template id="template_environment_row">

src/pytest_html/scripts/main.js

@@ -17,15 +17,22 @@ const renderStatic = () => {
         document.querySelector('#title').innerText = title
         document.querySelector('#head-title').innerText = title
     }
-    const renderTable = () => {
+    const renderEnvironmentTable = () => {
         const environment = manager.environment
         const rows = Object.keys(environment).map((key) => dom.getStaticRow(key, environment[key]))
         const table = document.querySelector('#environment')
         removeChildren(table)
         rows.forEach((row) => table.appendChild(row))
+
+        const header = document.querySelector('#environment-header')
+        header.addEventListener('click', () => {
+            table.classList.toggle('hidden')
+            header.classList.toggle('collapser')
+            header.classList.toggle('expander')
+        })
     }
     renderTitle()
-    renderTable()
+    renderEnvironmentTable()
 }
 
 const renderContent = (tests) => {