JS to toggle forms on screen

src/registrar/assets/js/get-gov.js

@@ -483,3 +483,56 @@ function prepareDeleteButtons(formLabel) {
     }, 50);
   }
 })();
+
+function toggleTwoDomElements(ele1, ele2, index) {
+  let element1 = document.getElementById(ele1);
+  let element2 = document.getElementById(ele2);
+  if (element1 && element2) {
+      // Toggle display based on the index
+      element1.style.display = index === 1 ? 'block' : 'none';
+      element2.style.display = index === 2 ? 'block' : 'none';
+  } else {
+      console.error('One or both elements not found.');
+  }
+}
+
+/**
+ * An IIFE that listens to the other contacts radio form on DAs and toggles the contacts/no other contacts forms 
+ *
+ */
+(function otherContactsFormListener() {
+  // Get the radio buttons
+  let radioButtons = document.querySelectorAll('input[name="other_contacts-has_other_contacts"]');
+
+  function handleRadioButtonChange() {
+      // Check the value of the selected radio button
+      let selectedValue = document.querySelector('input[name="other_contacts-has_other_contacts"]:checked').value;
+
+      switch (selectedValue) {
+          case 'True':
+              console.log('Yes, I can name other employees.');
+              toggleTwoDomElements('other-employees', 'no-other-employees', 1);
+              break;
+
+          case 'False':
+              console.log('No (We\'ll ask you to explain why).');
+              toggleTwoDomElements('other-employees', 'no-other-employees', 2);
+              break;
+
+          default:
+              console.log('Nothing selected');
+              toggleTwoDomElements('other-employees', 'no-other-employees', 0);
+      }
+  }
+
+  // Add event listener to each radio button
+  if (radioButtons) {
+      radioButtons.forEach(function (radioButton) {
+          radioButton.addEventListener('change', handleRadioButtonChange);
+      });
+  }
+
+  // initiaize
+  handleRadioButtonChange();
+})();
+

src/registrar/templates/application_no_other_contacts.html

@@ -1,8 +0,0 @@
-{% extends 'application_form.html' %}
-{% load static field_helpers %}
-
-{% block form_fields %}
-  {% with attr_maxlength=1000 %}
-    {% input_with_errors forms.0.no_other_contacts_rationale %}
-  {% endwith %}
-{% endblock %}

src/registrar/templates/application_other_contacts.html

@@ -21,6 +21,7 @@
   {{ forms.0 }}
   {# forms.0 is a small yes/no form that toggles the visibility of "other contact" formset #}
 
+    <div id="other-employees">
         {{ forms.1.management_form }}
         {# forms.1 is a formset and this iterates over its forms #}
         {% for form in forms.1.forms %}
@@ -50,13 +51,17 @@
             </fieldset>
         {% endfor %}
 
-  {% with attr_maxlength=1000 %}
-    {% input_with_errors forms.2.no_other_contacts_rationale %}
-  {% endwith %}
-
         <button type="submit" name="submit_button" value="save" class="usa-button usa-button--unstyled">
             <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
             <use xlink:href="{%static 'img/sprite.svg'%}#add_circle"></use>
             </svg><span class="margin-left-05">Add another contact</span>
         </button>
+    </div>
+
+    <div id="no-other-employees">
+        {% with attr_maxlength=1000 %}
+            {% input_with_errors forms.2.no_other_contacts_rationale %}
+        {% endwith %}
+    </div>
+
 {% endblock %}

src/registrar/templates/application_review.html

@@ -103,11 +103,8 @@
                 {% include "includes/contact.html" with contact=other %}
               </div>
             {% empty %}
-              None
-            {% endfor %}
-          {% endif %}
-          {% if step == Step.NO_OTHER_CONTACTS %}
               {{ application.no_other_contacts_rationale|default:"Incomplete" }}
+            {% endfor %}
           {% endif %}
           {% if step == Step.ANYTHING_ELSE %}
             {{ application.anything_else|default:"No" }}