Through row 116

apps/map/templates/map/form-case_study.html

@@ -40,6 +40,14 @@
 
   <!-- Conditional logic for hiding and un-hiding fields. -->
   <script>
+    function showIf(thingToShow, whetherToShowIt) {
+      if (whetherToShowIt) {
+        $(thingToShow).show()
+      } else {
+        $(thingToShow).hide()
+      }
+    }
+
     // Here we define the fields we need to conditionally toggle.
     // TODO: Move this knowledge out of the template
     var conditionalFields = [
@@ -102,13 +110,25 @@
         name: "power_technology",
         redraw: function() {
           const other = document.getElementById('id_id_power_technology_0_4')
-          const showHide = document.getElementById('div_id_power_technology_other')
+          const panel = document.getElementById('div_id_power_technology_other')
 
-          if (other.checked) {
-            $(showHide).show();
-          } else {
-            $(showHide).hide();
-          }
+          showIf(panel, other.checked)
+        }
+      },
+
+      {
+        name: "power_technology",
+        redraw: function() {
+          const group = document.forms['case-study-form'].power_technology
+
+          // Storage / other
+          let showStorage = ['ES', 'OT'].includes(group.value)
+
+          // Transmission / heat / other
+          let showTransmission = ['PT', 'HN', 'OT'].includes(group.value)
+
+          showIf('#div_id_energy_storage_capacity', showStorage)
+          showIf('#div_id_energy_transmission_capacity', showTransmission)
         }
       },
 
@@ -134,11 +154,7 @@
             const input = document.getElementById(option.input)
             const section = document.getElementById(option.section)
 
-            if (input.checked) {
-              $(section).show();
-            } else {
-              $(section).hide();
-            }
+            showIf(section, input.checked)
           }
         }
       }