diff --git a/app/plugins/CoreAssigner/templates/FormatAssigners/fields.inc b/app/plugins/CoreAssigner/templates/FormatAssigners/fields.inc
index 2de0ec752..f382bc570 100644
--- a/app/plugins/CoreAssigner/templates/FormatAssigners/fields.inc
+++ b/app/plugins/CoreAssigner/templates/FormatAssigners/fields.inc
@@ -28,22 +28,22 @@
 <script type="text/javascript">
   // JS specific to these fields
 
-  function fields_update_gadgets() {
+  function updateGadgets(isPageLoad) {
     // Hide or show gadgets according to current state
-
     var mode = document.getElementById('collision-mode').value;
     
     if(mode == '<?= \CoreAssigner\Lib\Enum\CollisionModeEnum::Sequential ?>') {
-      $("#maximum").closest('li').hide('fade');
+      hideFields(['maximum'], isPageLoad);
     } else {
-      $("#maximum").closest('li').show('fade');
+      showFields(['maximum'], isPageLoad);
     }
   }
 
-  function js_local_onload() {
-    fields_update_gadgets();
+  function jsLocalOnLoad() {
+    updateGadgets(true);
   }
 </script>
+  
 <?php
 // This view does currently not support read-only, and add is not used
 if($vv_action == 'edit') {
@@ -52,7 +52,7 @@ if($vv_action == 'edit') {
   print $this->Field->control(
     fieldName: 'collision_mode',
     options: [
-      'onChange' => 'javascript:fields_update_gadgets();'
+      'onChange' => 'updateGadgets()'
     ]
   );
 
diff --git a/app/src/View/Helper/FieldHelper.php b/app/src/View/Helper/FieldHelper.php
index 2329855c7..93a112a24 100644
--- a/app/src/View/Helper/FieldHelper.php
+++ b/app/src/View/Helper/FieldHelper.php
@@ -284,7 +284,7 @@ public function endControlSet(): string {
    */
   
   protected function endLine(): string {
-    return "</li>\n";
+    return "</div></li>\n";
   }
   
   /**
@@ -556,7 +556,7 @@ protected function startLine(string $class=null): string {
       $ret .= ' class="' . $class . '"';
     }
     
-    $ret .= '>';
+    $ret .= '><div class="field">';
     
     return $ret;
   }
@@ -571,12 +571,14 @@ protected function startLine(string $class=null): string {
   
   public function submit(string $label): string {
     return '<li class="fields-submit">
-      <div class="field-name">
-        <span class="required">* ' . __d('field', 'required') . '</span>
-      </div>
-      <div class="field-info">
-        ' . $this->Form->submit($label) . '
-      </div>
+      <div class="field">
+        <div class="field-name">
+          <span class="required">* ' . __d('field', 'required') . '</span>
+        </div>
+        <div class="field-info">
+          ' . $this->Form->submit($label) . '
+        </div>
+      </div>  
     </li>';
   }
 }
\ No newline at end of file
diff --git a/app/templates/IdentifierAssignments/fields.inc b/app/templates/IdentifierAssignments/fields.inc
index 9fa5e4717..a7c764847 100644
--- a/app/templates/IdentifierAssignments/fields.inc
+++ b/app/templates/IdentifierAssignments/fields.inc
@@ -28,40 +28,43 @@
 <script type="text/javascript">
   // JS specific to these fields
 
-  function fields_update_gadgets() {
+  function updateGadgets(isPageLoad) {
     // Hide or show gadgets according to current state
-
     var context = document.getElementById('context').value;
 
-    if(context == '<?= \App\Lib\Enum\IdentifierAssignmentContextEnum::Person ?>') {
-      $("#group-id").closest('li').hide('fade');
-// Group ID restriction is not yet implemented (CFM-57)
-//      $("#group-id").closest('li').show('fade');
-      $("#email-address-type-id").closest('li').show('fade');
+    if(context == '') {
+      // Collapse all gadgets when context is empty.
+      hideFields(['email-address-type-id','group-id','login'], isPageLoad);
+    } else if(context == '<?= \App\Lib\Enum\IdentifierAssignmentContextEnum::Person ?>') {
+      // Show/Hide for Person context
+// XXX Group ID restriction is not yet implemented (CFM-57)
+// TODO: When it is, add 'group-id' to the showFields() array.
+      showFields(['email-address-type-id'], isPageLoad);
+      hideFields(['group-id'], isPageLoad);
 
       var identifierType = document.getElementById('identifier-type-id').value;
-
       if(!identifierType) {
-        $("#login").closest('li').hide('fade');
+        hideFields(['login'], isPageLoad);
       } else {
-        $("#login").closest('li').show('fade');
+        showFields(['login'], isPageLoad);
       }
     } else {
-      $("#group-id").closest('li').hide('fade');
-      $("#email-address-type-id").closest('li').hide('fade');
-      $("#login").closest('li').hide('fade');
+      // Show/Hide for Group context
+      showFields(['group-id'], isPageLoad);
+      hideFields(['email-address-type-id','login'], isPageLoad);
     }
   }
 
-  function reset_type(id) {
+  function resetType(id) {
     document.getElementById(id).value = "";
-    fields_update_gadgets();
+    updateGadgets();
   }
 
-  function js_local_onload() {
-    fields_update_gadgets();
+  function jsLocalOnLoad() {
+    updateGadgets(true);
   }
 </script>
+  
 <?php
 // This view does not support read-only
 if($vv_action == 'add' || $vv_action == 'edit') {
@@ -74,27 +77,30 @@ if($vv_action == 'add' || $vv_action == 'edit') {
   print $this->Field->control(
     fieldName: 'context',
     options: [
-      'onChange' => 'javascript:fields_update_gadgets();'
+      'onChange' => 'updateGadgets()'
     ]
   );
   
-  print $this->Field->control('group_id');
-  
   print $this->Field->control(
     fieldName: 'identifier_type_id',
     options: [
-      'onChange' => 'javascript:reset_type("email-address-type-id")'
+      'onChange' => 'resetType("email-address-type-id")'
     ]
   );
   
-  print $this->Field->control('login');
+  print $this->Field->control(
+    fieldName: 'login',
+    cssClass: 'subfield'
+  );
 
   print $this->Field->control(
     fieldName: 'email_address_type_id',
     options: [
-      'onChange' => 'javascript:reset_type("identifier-type-id")'
+      'onChange' => 'resetType("identifier-type-id")'
     ]
   );
 
+  print $this->Field->control('group_id');
+
   print $this->Field->control('ordr');
 }
\ No newline at end of file
diff --git a/app/templates/ProvisioningTargets/fields.inc b/app/templates/ProvisioningTargets/fields.inc
index 12f3db035..fd4ed02cf 100644
--- a/app/templates/ProvisioningTargets/fields.inc
+++ b/app/templates/ProvisioningTargets/fields.inc
@@ -27,35 +27,45 @@
 ?>
 <script type="text/javascript">
   // JS specific to these fields
-
-  function fields_update_gadgets() {
+  
+  function updateGadgets(isPageLoad) {
     // Hide or show gadgets according to current state
+    var status = document.getElementById('status').value;
 
-    var attr = document.getElementById('status').value;
-
-    if(attr == "<?= \App\Lib\Enum\ProvisionerModeEnum::Queue ?>"
-       || attr == "<?= \App\Lib\Enum\ProvisionerModeEnum::QueueOnError ?>") {
+    if(status == "<?= \App\Lib\Enum\ProvisionerModeEnum::Queue ?>"
+       || status == "<?= \App\Lib\Enum\ProvisionerModeEnum::QueueOnError ?>") {
 alert("Queue modes not yet implemented"); // XXX CFM-26
-      $("#retry-interval").closest('li').show('fade');
+      showFields(['retry-interval'], isPageLoad);
     } else {
-      $("#retry-interval").closest('li').hide('fade');
+      hideFields(['retry-interval'], isPageLoad);
     }
   }
 
-  function js_local_onload() {
-    fields_update_gadgets();
+  function jsLocalOnLoad() {
+    updateGadgets(true);
   }
 </script>
+  
 <?php
 // This view does not support read-only
 if($vv_action == 'add' || $vv_action == 'edit') {
   print $this->Field->control('description');
 
-  print $this->Field->control('status', 
-                              ['onChange' => 'fields_update_gadgets();',
-                               'default'  => \App\Lib\Enum\ProvisionerModeEnum::QueueOnError]);
+  print $this->Field->control(
+    fieldName: 'status', 
+    options: [
+      'onChange' => 'updateGadgets()',
+      'default'  => \App\Lib\Enum\ProvisionerModeEnum::QueueOnError
+    ]
+  );
   
-  print $this->Field->control('retry_interval', ['default' => 900]);
+  print $this->Field->control(
+    fieldName: 'retry_interval', 
+    options: [
+      'default' => 900
+    ],
+    cssClass: 'subfield'
+  );
 
   print $this->Field->control('plugin');
 
diff --git a/app/templates/Types/fields.inc b/app/templates/Types/fields.inc
index 9e189f1db..8e89035de 100644
--- a/app/templates/Types/fields.inc
+++ b/app/templates/Types/fields.inc
@@ -28,28 +28,33 @@
 <script type="text/javascript">
   // JS specific to these fields
 
-  function fields_update_gadgets() {
+  function updateGadgets(isPageLoad) {
     // Hide or show gadgets according to current state
-
     var attr = document.getElementById('attribute').value;
-    
+
+    // Handle page interaction
     if(attr == 'PersonRoles.affiliation_type') {
-      $("#edupersonaffiliation").closest('li').show('fade');
+      showFields(['edupersonaffiliation'], isPageLoad);
     } else {
-      $("#edupersonaffiliation").closest('li').hide('fade');
+      hideFields(['edupersonaffiliation'], isPageLoad);
     }
   }
 
-  function js_local_onload() {
-    fields_update_gadgets();
+  function jsLocalOnLoad() {
+    updateGadgets(true);
   }
 </script>
+  
 <?php
 // This view does not support read-only
 if($vv_action == 'add' || $vv_action == 'edit') {
-  print $this->Field->control('attribute', 
-                              ['onChange' => 'fields_update_gadgets();',
-                               'readonly' => $vv_action == 'edit']);
+  print $this->Field->control(
+    fieldName: 'attribute', 
+    options: [
+      'onChange' => 'updateGadgets()', 
+      'readonly' => $vv_action == 'edit'
+    ]
+  );
   
   print $this->Field->control('display_name');
   
diff --git a/app/templates/element/dialog.php b/app/templates/element/dialog.php
index c8ef2923f..b1e765cdc 100644
--- a/app/templates/element/dialog.php
+++ b/app/templates/element/dialog.php
@@ -26,7 +26,7 @@
    *
    * This generic modal dialog stub is used for confirmations, e.g. when deleting a record.
    * The text of the box is overridden with JavaScript, and the confirm button is intended to
-   * click a CakePHP postLink or postButton in the DOM. Use js_confirm_generic() to call it.
+   * click a CakePHP postLink or postButton in the DOM. Use jsConfirmGeneric() to call it.
    */
 ?>
 
diff --git a/app/templates/element/menuAction.php b/app/templates/element/menuAction.php
index ba1dcbc95..404e9b78a 100644
--- a/app/templates/element/menuAction.php
+++ b/app/templates/element/menuAction.php
@@ -106,7 +106,7 @@ class="<?= $actionsMenuClass; ?>">
             $cancelButtonText = !empty($action['confirm']['dg_cancel_btn']) ? $action['confirm']['dg_cancel_btn'] : __d('operation','cancel');
             $replacements = !empty($action['confirm']['dg_body_txt_replacements']) ? $action['confirm']['dg_body_txt_replacements'] : '';
 
-            $dg_onclick = 'javascript:js_confirm_generic(\''
+            $dg_onclick = 'javascript:jsConfirmGeneric(\''
             . $dialogBodyText . '\',\''          // dialog body text
             . $actionUrl . '\',\''               // URL to redirect to on confirm
             . $actionUid . '\',\''               // ID of postButton element to click on confirm if not empty
diff --git a/app/templates/layout/default.php b/app/templates/layout/default.php
index c9087c935..d804d47c6 100644
--- a/app/templates/layout/default.php
+++ b/app/templates/layout/default.php
@@ -90,7 +90,7 @@
       $bodyClasses .= ' logged-out';
     }
   ?>
-  <body class="<?= $bodyClasses ?>" onload="js_onload_call_hooks()">
+  <body class="<?= $bodyClasses ?>" onload="jsOnLoadCallHooks()">
     <div id="skip-to-content-box">
       <a href="#content-start" id="skip-to-content" class="visually-hidden-focusable nospin"><?= __d('operation', 'skip_to_content') ?></a>
     </div>
diff --git a/app/templates/layout/iframe.php b/app/templates/layout/iframe.php
index e3a3e1b35..6010ae512 100644
--- a/app/templates/layout/iframe.php
+++ b/app/templates/layout/iframe.php
@@ -90,7 +90,7 @@
       $bodyClasses .= ' logged-out';
     }
   ?>
-  <body class="<?= $bodyClasses ?>" onload="js_onload_call_hooks()">
+  <body class="<?= $bodyClasses ?>" onload="jsOnLoadCallHooks()">
     <!-- Iframe layout -->
     <div id="comanage-iframe-wrapper">
       <main id="main">
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
index a80b75fe4..e5a73246d 100644
--- a/app/webroot/css/co-base.css
+++ b/app/webroot/css/co-base.css
@@ -1130,7 +1130,7 @@ ul.data-list li {
   background-color: var(--cmg-color-bg-003);
 }
 ul.data-list li:nth-child(2n) {
-  background-color: var(--cmg-color-bg-009); /* note that this is slightly lighter than the .form-list zebra */
+  background-color: var(--cmg-color-bg-009);
 }
 ul.data-table li {
   background-color: unset;
@@ -1152,25 +1152,34 @@ above. ***/
 ul.form-list {
   clear: both;
   padding: 0;
-  border-top: 1px solid var(--cmg-color-bg-005);
 }
 .cm-time-picker-vals ul li,
 ul.form-list li {
-  background-color: var(--cmg-color-bg-001);
+  background-color: var(--cmg-color-body-bg);
   border-left: 1px solid var(--cmg-color-bg-005);
-  border-bottom: 1px solid var(--cmg-color-bg-005);
+  border-top: 1px solid var(--cmg-color-bg-005);
   border-right: 1px solid var(--cmg-color-bg-005);
   margin: 0;
-  padding: 0.75em;
+  padding: 0;
   list-style: none;
 }
-.cm-time-picker-vals ul li:nth-child(even),
-ul.form-list li:nth-child(even) {
+ul.form-list li:focus-within {
+  background-color: var(--cmg-color-bg-001);
+}
+ul.form-list li.fields-submit:focus-within {
   background-color: var(--cmg-color-body-bg);
 }
+ul.form-list li.subfield {
+  border-top: none;
+}
+ul.form-list li .field {
+  margin: 0;
+  padding: 0.75em;
+}
 ul.form-list li.fields-submit {
   background-color: unset;
-  border: none;
+  border-left: none;
+  border-right: none;
 }
 ul.form-list .field-name {
   display: block;
@@ -1362,6 +1371,9 @@ ul.form-list .cm-time-picker-vals li {
   display: block;
   padding: 4px 0 0 0;
 }
+.cm-time-picker-vals ul li:nth-child(even) {
+  background-color: var(--cmg-color-body-bg);
+}
 .cm-time-picker-vals button {
   background-color: transparent;
   border: none;
@@ -1392,6 +1404,7 @@ ul.form-list .cm-time-picker-vals li {
   position: absolute;
   border: none;
   right: 2.5em;
+  padding-top: 1em;
   color: var(--cmg-color-txt-soft);
   background-color: unset;
 }
@@ -1827,6 +1840,11 @@ html.dark-mode .btn-default:active {
   background-color: var(--cmg-color-body-bg);
   border-color: var(--cmg-color-bg-006);
 }
+.collapsing {
+  transition-property: height, visibility;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-out;
+}
 /* FOOTER */
 footer {
   text-align: center;
diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css
index 3bccd3e82..22fc96c68 100644
--- a/app/webroot/css/co-responsive.css
+++ b/app/webroot/css/co-responsive.css
@@ -87,7 +87,7 @@
   ul.form-list-admin .field-info {
     width: 40%;
   }
-  ul.form-list li {
+  ul.form-list li .field {
     display: flex;
     column-gap: 1em;
     align-items: center;
diff --git a/app/webroot/js/comanage/comanage.js b/app/webroot/js/comanage/comanage.js
index f57e94db1..1b4f7d9c2 100644
--- a/app/webroot/js/comanage/comanage.js
+++ b/app/webroot/js/comanage/comanage.js
@@ -26,17 +26,17 @@
 
 // On page load, call any defined initialization functions.
 // Make sure function is defined before calling.
-function js_onload_call_hooks() {
-  if(window.js_local_onload) {
-    js_local_onload();
+function jsOnLoadCallHooks() {
+  if(window.jsLocalOnLoad) {
+    jsLocalOnLoad();
   }
 }
 
 // On form submit, call any defined functions.
 // Make sure function is defined before calling.
-function js_onsubmit_call_hooks() {
-  if(window.js_local_onsubmit) {
-    js_local_onsubmit();
+function jsOnSubmitCallHooks() {
+  if(window.jsLocalOnSubmit) {
+    jsLocalOnSubmit();
   }
 }
 
@@ -55,6 +55,32 @@ function stopSpinner() {
   $("#co-loading").hide();
 }
 
+// Show fields in .form-list output.
+// fields          - array of field IDs
+// isPageLoad      - boolean, true for first page load
+function showFields(fields, isPageLoad) {
+  for(const field of fields) {
+    if(isPageLoad !== undefined && isPageLoad) {
+      $('#' + field).closest('li').addClass('collapse show');
+    } else {
+      $('#' + field).closest('li').collapse('show');
+    }  
+  }
+}
+
+// Hide fields in .form-list output.
+// fields          - array of field IDs
+// isPageLoad      - boolean, true for first page load
+function hideFields(fields, isPageLoad) {
+  for(const field of fields) {
+    if(isPageLoad !== undefined && isPageLoad) {
+      $('#' + field).closest('li').addClass('collapse');
+    } else {
+      $('#' + field).closest('li').collapse('hide');
+    }
+  }
+}
+
 // Returns an i18n string with tokens replaced.
 // For use in JavaScript dialogs.
 // text          - body text for the array with tokens {0}, {1}, etc
@@ -76,7 +102,7 @@ function replaceTokens(text,replacements) {
 // cancelbtxt         - cancel button text     (string, optional)
 // titletxt           - dialog title text      (string, optional)
 // tokenReplacements  - strings to replace tokens in dialog body text (array, optional)
-function js_confirm_generic(txt, confirmUrl, clickId, confirmbtxt, cancelbtxt, titletxt, tokenReplacements) {
+function jsConfirmGeneric(txt, confirmUrl, clickId, confirmbtxt, cancelbtxt, titletxt, tokenReplacements) {
 
   var bodyText = txt;
   var confUrl = confirmUrl;