hidable menu content

index.html

@@ -7,6 +7,8 @@
     <sidebar>
       <h1>Cellular Automaton Explorer</h1>
       <div class="menu-row">
+        <h2>Elementary Cellular Automata</h2>
+        <div class="menu-row-content">
           <form name="rules">
             <div class="form-field">
               <label>Rules</label>
@@ -61,8 +63,6 @@
               <input type="button" name="reset" id="reset" value="reset"/>
             </div>
           </form>
-      </div>
-      <div class="menu-row">
           <form>
             <div class="form-field">
               <label for="live">Living cell color</label>
@@ -83,6 +83,12 @@
             </div>
           </form>
         </div>
+      </div>
+      <!-- <div class="menu-row"> -->
+      <!--   <h2>2D Cellular Automata</h2> -->
+      <!--   <div class="menu-row-content"> -->
+      <!--   </div> -->
+      <!-- </div> -->
     </sidebar>
     <main id="main">
       <canvas width="500" height="500" id="canvas"></canvas>

main.js

@@ -11,6 +11,7 @@ const resetBtn = document.querySelector('#reset');
 const stopBtn = document.querySelector('#stop');
 const cellSize = document.querySelector('#cellSize');
 const loop = document.querySelector('#loop');
+const menuRow = document.querySelectorAll('.menu-row');
 
 canvas.width = main.offsetWidth * 0.9;
 canvas.height = main.offsetHeight * 0.9;
@@ -123,3 +124,12 @@ resetBtn.addEventListener('click', async () => {
 stopBtn.addEventListener('click', async () => {
   drawing = 0;
 });
+
+menuRow.forEach((elem) => {
+  elem.querySelector('h2').addEventListener('click', async (e) => {
+    // ugly
+    const menuDisplay = e.currentTarget.parentNode.querySelector('.menu-row-content').style;
+    if (menuDisplay.display !== 'none') menuDisplay.setProperty('display', 'none');
+    else menuDisplay.setProperty('display', 'block');
+  });
+});

style.css

@@ -15,9 +15,20 @@ canvas {
     margin: 20px 0 0 0;
 }
 
+h1, h2 {
+    font-weight: bold;
+}
+
 h1 {
     font-size: large;
-    font-weight: bold;
+}
+
+.menu-row h2 {
+    font-size: medium;
+    margin-left: 10px;
+    padding: 10px;
+    cursor: pointer;
+    border: 2px solid darkgrey;
 }
 
 sidebar {
@@ -38,6 +49,7 @@ input[type="button"] {
 
 .menu-row {
     flex: 1;
+    margin: 5px 0;
 }
 
 label, .form-field label {