From f7acfa637eaa43cbccd0ebc385f0545340961996 Mon Sep 17 00:00:00 2001
From: Chris Kim <chriskim@Chriss-MacBook-Pro.local>
Date: Thu, 14 Sep 2023 15:15:50 -0700
Subject: [PATCH] Increase truncation to 60 chars to allow for different ids
 for accordion elements

---
 .../facility_health_service.drupal.liquid     |  86 +++++----
 .../facilities/health_service.drupal.liquid   |   2 +-
 .../layouts/faq_multiple_q_a.drupal.liquid    |   2 +-
 .../health_care_local_facility.drupal.liquid  | 178 ++++++++----------
 src/site/layouts/landing_page.drupal.liquid   |  75 +++++---
 .../collapsible_panel.drupal.liquid           | 116 ++++++------
 .../q_a.collapsible_panel.drupal.liquid       |  18 +-
 ..._a_group_collapsible_content.drupal.liquid |   2 +-
 8 files changed, 236 insertions(+), 243 deletions(-)

diff --git a/src/site/facilities/facility_health_service.drupal.liquid b/src/site/facilities/facility_health_service.drupal.liquid
index aef272e422..d83836f6d1 100644
--- a/src/site/facilities/facility_health_service.drupal.liquid
+++ b/src/site/facilities/facility_health_service.drupal.liquid
@@ -1,48 +1,46 @@
-    {% assign serviceTaxonomy = healthService.fieldServiceNameAndDescripti.entity %}
-    <va-accordion-item
-      {% if serviceTaxonomy.fieldAlsoKnownAs %}
-        subheader="{{ serviceTaxonomy.fieldAlsoKnownAs }}"
-      {% endif %}
-      class="facilities_health_service va-accordion-item"
-      data-label="{{ serviceTaxonomy.name }}"
-      data-childlabel="{{ serviceTaxonomy.fieldAlsoKnownAs }}"
-      data-template="facilities/facilities_health_service"
-      id="{{serviceTaxonomy.name | hashReference: 30 }}"
-    >
-      <h3 slot="headline">
-        {{ serviceTaxonomy.name }}
-      </h3>
-      <div
-        id="{{ serviceTaxonomy.entityBundle }}-{{ serviceTaxonomy.entityId }}"
-      >
-        {% if serviceTaxonomy.fieldCommonlyTreatedCondition %}
-          <div class="vads-u-margin-bottom--2">
-            <span class="vads-u-font-style--italic">Common conditions: </span>{{ serviceTaxonomy.fieldCommonlyTreatedCondition }}
-          </div>
-        {% endif %}
+{% assign serviceTaxonomy = healthService.fieldServiceNameAndDescripti.entity %}
+<va-accordion-item
+  {% if serviceTaxonomy.fieldAlsoKnownAs %}
+  subheader="{{ serviceTaxonomy.fieldAlsoKnownAs }}"
+  {% endif %}
+  class="facilities_health_service va-accordion-item"
+  data-label="{{ serviceTaxonomy.name }}"
+  data-childlabel="{{ serviceTaxonomy.fieldAlsoKnownAs }}"
+  data-template="facilities/facilities_health_service"
+  id="{{serviceTaxonomy.name | hashReference: 60 }}">
+  <h3 slot="headline">
+    {{ serviceTaxonomy.name }}
+  </h3>
+  <div id="{{ serviceTaxonomy.entityBundle }}-{{ serviceTaxonomy.entityId }}">
+    {% if serviceTaxonomy.fieldCommonlyTreatedCondition %}
+      <div class="vads-u-margin-bottom--2">
+        <span class="vads-u-font-style--italic">Common conditions:
+        </span>
+        {{ serviceTaxonomy.fieldCommonlyTreatedCondition }}
+      </div>
+    {% endif %}
 
-        {% if serviceSection.name == "Lovell - TRICARE" and serviceTaxonomy.fieldTricareDescription %}
-          <div>{{ serviceTaxonomy.fieldTricareDescription }}</div>
-        {% elsif serviceTaxonomy.description.processed %}
-          <div>{{ serviceTaxonomy.description.processed }}</div>
-        {% endif %}
+    {% if serviceSection.name == "Lovell - TRICARE" and serviceTaxonomy.fieldTricareDescription %}
+      <div>{{ serviceTaxonomy.fieldTricareDescription }}</div>
+    {% elsif serviceTaxonomy.description.processed %}
+      <div>{{ serviceTaxonomy.description.processed }}</div>
+    {% endif %}
 
-        {% if locations.0.entity %}
-          {% include "src/site/facilities/health_care_local_health_service.drupal.liquid" %}
-        {% else %}
-          <div>{{ localServiceDescription }}</div>
-        {% endif %}
+    {% if locations.0.entity %}
+      {% include "src/site/facilities/health_care_local_health_service.drupal.liquid" %}
+    {% else %}
+      <div>{{ localServiceDescription }}</div>
+    {% endif %}
 
-        {% if fieldFacilityLocatorApiId contains "vha_" %}
-          <div
-            data-widget-type="facility-appointment-wait-times-widget"
-            data-facility="{{ fieldFacilityLocatorApiId | widgetFacilityDetail | escape }}"
-            data-service="{{ serviceTaxonomy | healthServiceApiId | escape }}"
-          ></div>
-        {% endif %}
+    {% if fieldFacilityLocatorApiId contains "vha_" %}
+      <div
+        data-widget-type="facility-appointment-wait-times-widget"
+        data-facility="{{ fieldFacilityLocatorApiId | widgetFacilityDetail | escape }}"
+        data-service="{{ serviceTaxonomy | healthServiceApiId | escape }}"></div>
+    {% endif %}
 
-        {% if healthService.fieldBody.processed %}
-          <div>{{ healthService.fieldBody.processed | replace: 'h3', 'h4' }}</div>
-        {% endif %}
-      </div>
-    </va-accordion-item>
+    {% if healthService.fieldBody.processed %}
+      <div>{{ healthService.fieldBody.processed | replace: 'h3', 'h4' }}</div>
+    {% endif %}
+  </div>
+</va-accordion-item>
\ No newline at end of file
diff --git a/src/site/facilities/health_service.drupal.liquid b/src/site/facilities/health_service.drupal.liquid
index 56b1685c31..264bc7a511 100644
--- a/src/site/facilities/health_service.drupal.liquid
+++ b/src/site/facilities/health_service.drupal.liquid
@@ -7,7 +7,7 @@
             class="va-accordion-item"
             data-label="{{ serviceTaxonomy.name }}"
             data-template="facilities/health_service"
-            id="{{serviceTaxonomy.name | hashReference: 30 }}"
+            id="{{serviceTaxonomy.name | hashReference: 60 }}"
         >
             <h3 slot="headline">
                 {{ serviceTaxonomy.name }}
diff --git a/src/site/layouts/faq_multiple_q_a.drupal.liquid b/src/site/layouts/faq_multiple_q_a.drupal.liquid
index 2ddd3cbfc5..1dc0be0d41 100644
--- a/src/site/layouts/faq_multiple_q_a.drupal.liquid
+++ b/src/site/layouts/faq_multiple_q_a.drupal.liquid
@@ -78,7 +78,7 @@
                       <va-accordion-item
                         class="va-accordion-item"
                         data-faq-entity-id="{{ fieldQA.entity.entityId }}"
-                        id="{{ fieldQA.entity.title | hashReference: 30 }}"
+                        id="{{ fieldQA.entity.title | hashReference: 60 }}"
                       >
                         <h3 slot="headline">
                           {{ fieldQA.entity.title }}
diff --git a/src/site/layouts/health_care_local_facility.drupal.liquid b/src/site/layouts/health_care_local_facility.drupal.liquid
index 9324eb529d..d0bf0055ae 100644
--- a/src/site/layouts/health_care_local_facility.drupal.liquid
+++ b/src/site/layouts/health_care_local_facility.drupal.liquid
@@ -9,8 +9,7 @@
       <div class="usa-width-three-fourths">
         <article class="usa-content va-l-facility-detail">
           {% include "src/site/includes/lovell-switch-link.drupal.liquid" with
-            entityUrl = entityUrl
-          %}
+           entityUrl = entityUrl %}
 
           {% if title != empty %}
             <h1>{{ title }}</h1>
@@ -22,8 +21,7 @@
             </div>
           {% endif %}
 
-          <div
-              class="usa-grid usa-grid-full vads-u-margin-y--1p5 vads-u-margin-bottom--6">
+          <div class="usa-grid usa-grid-full vads-u-margin-y--1p5 vads-u-margin-bottom--6">
             {% assign basePath = entityUrl.path | regionBasePath %}
             {% include "src/site/facilities/facilities_health_services_buttons.drupal.liquid" with path = basePath %}
           </div>
@@ -33,12 +31,10 @@
           <h2 class="vads-u-line-height--1 vads-u-margin-bottom--3">Location and
             contact information</h2>
 
-          <div
-              class="region-list usa-grid usa-grid-full vads-u-display--flex vads-u-flex-direction--column small-screen:vads-u-flex-direction--row facility vads-u-margin-bottom--2p5 vads-u-margin-bottom--4">
+          <div class="region-list usa-grid usa-grid-full vads-u-display--flex vads-u-flex-direction--column small-screen:vads-u-flex-direction--row facility vads-u-margin-bottom--2p5 vads-u-margin-bottom--4">
 
 
-            <div
-                class="usa-width-two-thirds vads-u-display--block vads-u-width--full">
+            <div class="usa-width-two-thirds vads-u-display--block vads-u-width--full">
               <div>
                 <div class="vads-c-facility-detail">
 
@@ -51,39 +47,38 @@
                   <section class="vads-facility-detail">
                     <script type="application/ld+json">
                       {
-                        "@context": "https://schema.org",
-                        "@type": "Place",
-                        "address": {
-                          "@type": "PostalAddress",
-                          "streetAddress": "{{ fieldAddress.addressLine1 }}",
-                          "addressLocality": "{{ fieldAddress.locality }}",
-                          "addressRegion": "{{ fieldAddress.administrativeArea }}",
-                          "postalCode": "{{ fieldAddress.postalCode }}"
-                        },
-                        "name": "{{ title }}",
-                        "telephone": "{{ fieldPhoneNumber }}",
-                        "openingHoursSpecification": [
-                          {% for hours in fieldOfficeHours %}
-                            {
-                              "@type": "OpeningHoursSpecification",
-                              "dayOfWeek": "https://schema.org/{{ hours.day | officeHoursDayFormatter: false }}",
-                              "opens": "{{ hours.starthours | deriveTimeForJSONLD: 'starthours', hours.comment }}",
-                              "closes": "{{ hours.endhours | deriveTimeForJSONLD: 'endhours', hours.comment }}"
-                            }{% if !forloop.last %},{% endif %}
-                          {% endfor %}
-                        ],
-                        "hasMap": "https://maps.google.com?saddr=Current+Location&daddr={{ fieldAddress.addressLine1 }}, {{ fieldAddress.locality }}, {{ fieldAddress.postalCode }}",
-                        "image": ["{{ fieldMedia.entity.image.derivative.url }}"],
-                        "branchCode": "{{ fieldFacilityLocatorApiId }}",
-                        "geo": {
-                          "@type": "GeoCoordinates",
-                          "latitude": "{{ fieldGeolocation.lat }}",
-                          "longitude": "{{ fieldGeolocation.lon }}"
-                        }
+                      "@context": "https://schema.org",
+                                              "@type": "Place",
+                                              "address": {
+                                                "@type": "PostalAddress",
+                                                "streetAddress": "{{ fieldAddress.addressLine1 }}",
+                      "addressLocality": "{{ fieldAddress.locality }}",
+                      "addressRegion": "{{ fieldAddress.administrativeArea }}",
+                      "postalCode": "{{ fieldAddress.postalCode }}"
+                      },
+                                              "name": "{{ title }}",
+                      "telephone": "{{ fieldPhoneNumber }}",
+                      "openingHoursSpecification": [
+                      {% for hours in fieldOfficeHours %}
+                        {
+                        "@type": "OpeningHoursSpecification",
+                                                      "dayOfWeek": "https://schema.org/{{ hours.day | officeHoursDayFormatter: false }}",
+                        "opens": "{{ hours.starthours | deriveTimeForJSONLD: 'starthours', hours.comment }}",
+                        "closes": "{{ hours.endhours | deriveTimeForJSONLD: 'endhours', hours.comment }}"
+                        }{% if !forloop.last %},{% endif %}
+                      {% endfor %}
+                      ],
+                      "hasMap": "https://maps.google.com?saddr=Current+Location&daddr={{ fieldAddress.addressLine1 }}, {{ fieldAddress.locality }}, {{ fieldAddress.postalCode }}",
+                      "image": ["{{ fieldMedia.entity.image.derivative.url }}"],
+                      "branchCode": "{{ fieldFacilityLocatorApiId }}",
+                      "geo": {
+                                                "@type": "GeoCoordinates",
+                                                "latitude": "{{ fieldGeolocation.lat }}",
+                      "longitude": "{{ fieldGeolocation.lon }}"
                       }
+                                            }
                     </script>
-                    <h3
-                        class="vads-u-font-size--lg vads-u-margin-top--0 vads-u-line-height--1 vads-u-margin-bottom--1">
+                    <h3 class="vads-u-font-size--lg vads-u-margin-top--0 vads-u-line-height--1 vads-u-margin-bottom--1">
                       Address
                     </h3>
                     <div class="vads-u-margin-bottom--3">
@@ -96,36 +91,35 @@
                         {{ fieldAddress.addressLine1 }}, {{ fieldAddress.locality }}, {{ fieldAddress.administrativeArea }} {{ fieldAddress.postalCode }}
                       {% endcapture %}
                       {% include "src/site/includes/directions-google-maps.liquid" with
-                        directionsLinkTitle = title
-                        directionsLinkAddress = fullAddress
-                      %}
+                       directionsLinkTitle = title
+                       directionsLinkAddress = fullAddress %}
 
                     </div>
-                    <h3
-                        class="vads-u-font-size--lg vads-u-margin-top--0 vads-u-line-height--1 vads-u-margin-bottom--1">
+                    <h3 class="vads-u-font-size--lg vads-u-margin-top--0 vads-u-line-height--1 vads-u-margin-bottom--1">
                       Phone numbers
                     </h3>
                     <div class="vads-u-margin-bottom--0">
                       {% if fieldPhoneNumber %}
                         <div class="main-phone vads-u-margin-bottom--1">
                           <strong>Main phone:
-                          </strong><a
-                              href="tel:{{ fieldPhoneNumber }}">{{ fieldPhoneNumber }}</a>
+                          </strong>
+                          <a href="tel:{{ fieldPhoneNumber }}">{{ fieldPhoneNumber }}</a>
                         </div>
                       {% endif %}
                       {% if fieldRegionPage.entity.fieldVaHealthConnectPhone %}
                         <div class="vads-u-margin-bottom--1">
                           <strong>VA health connect:</strong>
                           <a href="tel:{{ fieldRegionPage.entity.fieldVaHealthConnectPhone }}">
-                              {{ fieldRegionPage.entity.fieldVaHealthConnectPhone }}
+                            {{ fieldRegionPage.entity.fieldVaHealthConnectPhone }}
                           </a>
                         </div>
                       {% endif %}
                       {% if fieldMentalHealthPhone %}
-                        <div class="mental-health-care-phone"><strong>Mental
+                        <div class="mental-health-care-phone">
+                          <strong>Mental
                             health care:
-                          </strong><a
-                              href="tel:{{ fieldMentalHealthPhone }}">{{ fieldMentalHealthPhone }}</a>
+                          </strong>
+                          <a href="tel:{{ fieldMentalHealthPhone }}">{{ fieldMentalHealthPhone }}</a>
                         </div>
                       {% endif %}
                     </div>
@@ -135,9 +129,8 @@
               </div>
             </div>
             {% include "src/site/includes/image_and_static_map.liquid" with
-                facilityMedia = fieldMedia
-                facilityId = fieldFacilityLocatorApiId
-            %}
+             facilityMedia = fieldMedia
+             facilityId = fieldFacilityLocatorApiId %}
           </div>
 
           <!-- Location services section -->
@@ -146,23 +139,21 @@
           {% endcapture %}
           {% unless difference contains '-' %}
             <section class="vads-u-margin-bottom--4" data-label="Prepare for your visit">
-              <h2 id="prepare-for-your-visit"
-                  class="vads-u-margin-top--0 vads-u-font-size--lg small-screen:vads-u-font-size--xl vads-u-margin-bottom--2">
+              <h2 id="prepare-for-your-visit" class="vads-u-margin-top--0 vads-u-font-size--lg small-screen:vads-u-font-size--xl vads-u-margin-bottom--2">
                 Prepare for your visit</h2>
               <p>Click on a topic for more details.</p>
               <va-accordion section-heading="Prepare for your visit" bordered>
                 {% for accordionItem in fieldLocationServices %}
                   {% assign item = accordionItem.entity %}
                   {% comment %}
-                    See Google Analytics datalayer handling in src/applications/static-pages/subscribeAccordionEvents.js
+                  See Google Analytics datalayer handling in src/applications/static-pages/subscribeAccordionEvents.js
                   {% endcomment %}
                   <va-accordion-item
                     class="va-accordion-item"
                     header="{{ item.fieldTitle }}"
                     level="3"
                     data-label="{{ item.fieldTitle }}"
-                    id="{{ item.fieldTitle | hashReference: 30 }}"
-                  >
+                    id="{{ item.fieldTitle | hashReference: 60 }}">
                     <div id="{{ item.entityBundle }}-{{ item.entityId }}">
                       {% include "src/site/paragraphs/wysiwyg.drupal.liquid" entity = item %}
                     </div>
@@ -175,61 +166,58 @@
           <!-- List of links section -->
           {% if fieldRegionPage.entity.fieldRelatedLinks != empty %}
             {% include "src/site/paragraphs/facilities/list_of_link_teasers_facility.drupal.liquid"
-               with paragraph = fieldRegionPage.entity.fieldRelatedLinks.entity
-                    regionNickname = fieldRegionPage.entity.title
-            %}
+             with paragraph = fieldRegionPage.entity.fieldRelatedLinks.entity
+             regionNickname = fieldRegionPage.entity.title %}
           {% endif %}
 
           <!-- Local Health Services -->
           {% if fieldLocalHealthCareService != empty and fieldLocalHealthCareService.length %}
-            <h2 id="health-care-offered-here"
-                class="vads-u-font-size--xl vads-u-margin-top--5">Health services offered here</h2>
+            <h2 id="health-care-offered-here" class="vads-u-font-size--xl vads-u-margin-top--5">Health services offered here</h2>
             <p>Click on a service for more details like location, contact, and appointment
               information.</p>
-            <section class="local-health-services" id="local-health-services" data-label="Health services">
+            <section
+              class="local-health-services"
+              id="local-health-services"
+              data-label="Health services">
 
               {% assign localHealthServices = fieldLocalHealthCareService | sortObjectsBy: 'entity.fieldRegionalHealthService.entity.fieldServiceNameAndDescripti.entity.name' %}
 
               <va-accordion bordered>
-              {% for localService in localHealthServices %}
-                {% assign serviceSection = localService.entity.fieldAdministration.entity %}
-                {% assign localHealthService = localService.entity | featureFieldRegionalHealthService %}
-                {% if localHealthService != empty and localService.entity.status == true %}
-
-                  {% include "src/site/facilities/facility_health_service.drupal.liquid" with
-                      serviceSection
-                      healthService = localHealthService
-                      locationEntity = localService.entity
-                      locations = localService.entity.fieldServiceLocation
-                      localServiceDescription = localService.entity.fieldBody.processed
-                      fieldFacilityLocatorApiId = fieldFacilityLocatorApiId
-                  %}
-
-                {% endif %}
-              {% endfor %}
+                {% for localService in localHealthServices %}
+                  {% assign serviceSection = localService.entity.fieldAdministration.entity %}
+                  {% assign localHealthService = localService.entity | featureFieldRegionalHealthService %}
+                  {% if localHealthService != empty and localService.entity.status == true %}
+
+                    {% include "src/site/facilities/facility_health_service.drupal.liquid" with
+                     serviceSection
+                     healthService = localHealthService
+                     locationEntity = localService.entity
+                     locations = localService.entity.fieldServiceLocation
+                     localServiceDescription = localService.entity.fieldBody.processed
+                     fieldFacilityLocatorApiId = fieldFacilityLocatorApiId %}
+
+                  {% endif %}
+                {% endfor %}
               </va-accordion>
             </section>
           {% endif %}
 
           {% if fieldFacilityLocatorApiId contains "vha_" %}
-            <div data-widget-type="facility-patient-satisfaction-scores"
-                data-facility="{{ fieldFacilityLocatorApiId | widgetFacilityDetail | escape }}">
-            </div>
+            <div data-widget-type="facility-patient-satisfaction-scores" data-facility="{{ fieldFacilityLocatorApiId | widgetFacilityDetail | escape }}"></div>
           {% endif %}
 
           <!-- Social Links -->
           {% include "src/site/facilities/facility_social_links.drupal.liquid"
-              with  regionNickname = fieldRegionPage.entity.title
-                    fieldGovdeliveryIdEmerg = fieldRegionPage.entity.fieldGovdeliveryIdEmerg
-                    fieldGovdeliveryIdNews = fieldRegionPage.entity.fieldGovdeliveryIdNews
-                    fieldOperatingStatus = fieldRegionPage.entity.fieldOperatingStatus
-                    fieldFacebook = fieldRegionPage.entity.fieldFacebook
-                    fieldTwitter = fieldRegionPage.entity.fieldTwitter
-                    fieldInstagram = fieldRegionPage.entity.fieldInstagram
-                    fieldFlickr = fieldRegionPage.entity.fieldFlickr
-          %}
-  <!-- Last updated & feedback button-->
-        {% include "src/site/includes/above-footer-elements.drupal.liquid" %}
+           with regionNickname = fieldRegionPage.entity.title
+           fieldGovdeliveryIdEmerg = fieldRegionPage.entity.fieldGovdeliveryIdEmerg
+           fieldGovdeliveryIdNews = fieldRegionPage.entity.fieldGovdeliveryIdNews
+           fieldOperatingStatus = fieldRegionPage.entity.fieldOperatingStatus
+           fieldFacebook = fieldRegionPage.entity.fieldFacebook
+           fieldTwitter = fieldRegionPage.entity.fieldTwitter
+           fieldInstagram = fieldRegionPage.entity.fieldInstagram
+           fieldFlickr = fieldRegionPage.entity.fieldFlickr %}
+          <!-- Last updated & feedback button-->
+          {% include "src/site/includes/above-footer-elements.drupal.liquid" %}
         </article>
 
       </div>
@@ -237,4 +225,4 @@
   </main>
 </div>
 {% include "src/site/includes/footer.html" %}
-{% include "src/site/includes/debug.drupal.liquid" %}
+{% include "src/site/includes/debug.drupal.liquid" %}
\ No newline at end of file
diff --git a/src/site/layouts/landing_page.drupal.liquid b/src/site/layouts/landing_page.drupal.liquid
index 88f6a181a5..92df3ff61b 100644
--- a/src/site/layouts/landing_page.drupal.liquid
+++ b/src/site/layouts/landing_page.drupal.liquid
@@ -2,7 +2,10 @@
 {% include "src/site/includes/preview-edit.drupal.liquid" %}
 {% include "src/site/includes/breadcrumbs.drupal.liquid" %}
 
-<div id="content" class="interior" data-template="layouts/landing_page">
+<div
+  id="content"
+  class="interior"
+  data-template="layouts/landing_page">
   <main>
     <div class="usa-grid usa-grid-full">
       <article class="usa-width-two-thirds">
@@ -29,8 +32,8 @@
         {% if fieldAlert.length %}
           {% for alert in fieldAlert %}
             {% if alert.entity != empty %}
-                {% include "src/site/blocks/alert.drupal.liquid" with alert = alert.entity %}
-              {% endif %}
+              {% include "src/site/blocks/alert.drupal.liquid" with alert = alert.entity %}
+            {% endif %}
           {% endfor %}
         {% else %}
           {% if fieldAlert.entity != empty %}
@@ -52,8 +55,8 @@
             {% include 'src/site/paragraphs/list_of_link_teasers.drupal.liquid' entity = fieldRelatedLinks.entity boldTitle = true %}
           </section>
         {% endif %}
-    <!-- Last updated & feedback button -->
-          {% include "src/site/includes/above-footer-elements.drupal.liquid" %}
+        <!-- Last updated & feedback button -->
+        {% include "src/site/includes/above-footer-elements.drupal.liquid" %}
       </article>
 
       <div class="usa-width-one-third" id="hub-rail">
@@ -62,13 +65,12 @@
         {% endif %}
 
         <va-accordion bordered multi>
-          <va-accordion-item 
+          <va-accordion-item
             class="va-accordion-item"
             level="2"
             open="true"
             header="Ask questions"
-            id="{{ 'Message us' | hashReference: 30 }}"
-          >
+            id="{{ 'Message us' | hashReference }}">
             <section>
               <h3 class="vads-u-font-size--h4">Message us</h3>
               <ul class="va-nav-linkslist-list social">
@@ -89,14 +91,13 @@
                           <span>{{ service.title }}</span><br>
                           <span>{{ service.fieldPhoneNumber }}</span>
                         </a>
-                      <!-- It was requested that we hardcode in the aria-label and href for the TTY service -->
-                      <!-- see: https://github.com/department-of-veterans-affairs/va.gov-team/issues/18151#issuecomment-879993959 -->
+                        <!-- It was requested that we hardcode in the aria-label and href for the TTY service -->
+                        <!-- see: https://github.com/department-of-veterans-affairs/va.gov-team/issues/18151#issuecomment-879993959 -->
                       {% elsif service.title contains "TTY: 711" %}
                         <a
                           aria-label="TTY: 7 1 1."
                           href="tel:+1711"
-                          onclick="recordEvent({ 'event': 'nav-hub-rail', 'nav-path': 'Ask questions' });"
-                        >
+                          onclick="recordEvent({ 'event': 'nav-hub-rail', 'nav-path': 'Ask questions' });">
                           <span>{{ service.title }}</span><br>
                         </a>
                       {% elsif service.fieldLink.url.path %}
@@ -119,8 +120,7 @@
               level="2"
               open="true"
               header="Not a Veteran?"
-              id="{{ 'Get information for' | hashReference: 30 }}"
-            >
+              id="{{ 'Get information for' | hashReference: 60 }}">
               <section>
                 <h3 class="vads-u-font-size--h4">Get information for:</h3>
                 <ul class="va-nav-linkslist-list links">
@@ -136,8 +136,8 @@
             </va-accordion-item>
           {% endif %}
 
-        <!-- Connect with us -->
-        {% if fieldRelatedOffice != empty and fieldRelatedOffice.entity.fieldExternalLink.title != "Records benefits hub" %}
+          <!-- Connect with us -->
+          {% if fieldRelatedOffice != empty and fieldRelatedOffice.entity.fieldExternalLink.title != "Records benefits hub" %}
             <va-accordion-item
               class="va-accordion-item"
               level="2"
@@ -146,7 +146,10 @@
               id="{{ fieldRelatedOffice.entity.fieldExternalLink.title | hashReference: 30 }}">
               {% if fieldRelatedOffice.entity.fieldExternalLink.url.path != empty %}
                 <h3 class="va-nav-linkslist-list vads-u-font-size--h4">
-                  <a class="vads-u-text-decoration--underline" href="{{ fieldRelatedOffice.entity.fieldExternalLink.url.path }}" onclick="recordEvent({ 'event': 'nav-hub-rail', 'nav-path': 'Connect with us' });">
+                  <a
+                    class="vads-u-text-decoration--underline"
+                    href="{{ fieldRelatedOffice.entity.fieldExternalLink.url.path }}"
+                    onclick="recordEvent({ 'event': 'nav-hub-rail', 'nav-path': 'Connect with us' });">
                     {{ fieldRelatedOffice.entity.fieldExternalLink.title }}
                   </a>
                 </h3>
@@ -154,42 +157,54 @@
 
               <section>
                 <h3 class="vads-u-font-size--h4">Get updates</h3>
-                  <ul class="va-nav-linkslist-list social">
-                    <li>
-                      <a class="vads-u-text-decoration--underline" href="{{ fieldRelatedOffice.entity.fieldEmailUpdatesLink.url.path }}" onclick="recordEvent({ 'event': 'nav-hub-rail', 'nav-path': 'Connect with us' });">
-                        <i aria-hidden="true" class="fas fa-envelope vads-u-padding-right--1"></i>
-                        {{ fieldRelatedOffice.entity.fieldEmailUpdatesLink.title }}
-                      </a>
-                    </li>
+                <ul class="va-nav-linkslist-list social">
+                  <li>
+                    <a
+                      class="vads-u-text-decoration--underline"
+                      href="{{ fieldRelatedOffice.entity.fieldEmailUpdatesLink.url.path }}"
+                      onclick="recordEvent({ 'event': 'nav-hub-rail', 'nav-path': 'Connect with us' });">
+                      <i aria-hidden="true" class="fas fa-envelope vads-u-padding-right--1"></i>
+                      {{ fieldRelatedOffice.entity.fieldEmailUpdatesLink.title }}
+                    </a>
+                  </li>
                 </ul>
               </section>
 
               <section>
                 <h3 class="vads-u-font-size--h4">Follow us</h3>
                 <ul class="va-nav-linkslist-list social">
-                  {% assign socialLinks =  fieldRelatedOffice.entity.fieldSocialMediaLinks.platformValues | jsonToObj %}
+                  {% assign socialLinks = fieldRelatedOffice.entity.fieldSocialMediaLinks.platformValues | jsonToObj %}
                   {% assign socialPlatforms = socialLinks | keys %}
 
                   {% for socialPlatform in socialPlatforms %}
-                    {% assign socialLink = socialLinks | get: socialPlatform  %}
+                    {% assign socialLink = socialLinks | get: socialPlatform %}
                     {% if socialLink.value %}
                       {% if socialPlatform = "youtube_channel" %}
                         <li>
-                          <a class="vads-u-text-decoration--underline" href="http://youtube.com/channel/{{ socialLink.value }}" onclick="recordEvent({ 'event': 'nav-hub-rail', 'nav-path': 'Connect with us' });">
+                          <a
+                            class="vads-u-text-decoration--underline"
+                            href="http://youtube.com/channel/{{ socialLink.value }}"
+                            onclick="recordEvent({ 'event': 'nav-hub-rail', 'nav-path': 'Connect with us' });">
                             <i aria-hidden="true" class="fab fa-youtube vads-u-padding-right--1"></i>
                             {{ fieldRelatedOffice.entity.fieldExternalLink.title }} {{ socialPlatform | remove: '_' | capitalize }}
                           </a>
                         </li>
                       {% elsif socialPlatform == "youtube" %}
                         <li>
-                          <a class="vads-u-text-decoration--underline" href="http://{{ socialPlatform }}.com/{{ socialLink.value }}" onclick="recordEvent({ 'event': 'nav-hub-rail', 'nav-path': 'Connect with us' });">
+                          <a
+                            class="vads-u-text-decoration--underline"
+                            href="http://{{ socialPlatform }}.com/{{ socialLink.value }}"
+                            onclick="recordEvent({ 'event': 'nav-hub-rail', 'nav-path': 'Connect with us' });">
                             <i aria-hidden="true" class="fab fa-{{ socialPlatform }} vads-u-padding-right--1"></i>
                             {{ fieldRelatedOffice.entity.fieldExternalLink.title }} YouTube
                           </a>
                         </li>
                       {% else %}
                         <li>
-                          <a class="vads-u-text-decoration--underline" href="http://{{ socialPlatform }}.com/{{ socialLink.value }}" onclick="recordEvent({ 'event': 'nav-hub-rail', 'nav-path': 'Connect with us' });">
+                          <a
+                            class="vads-u-text-decoration--underline"
+                            href="http://{{ socialPlatform }}.com/{{ socialLink.value }}"
+                            onclick="recordEvent({ 'event': 'nav-hub-rail', 'nav-path': 'Connect with us' });">
                             <i aria-hidden="true" class="fab fa-{{ socialPlatform }} vads-u-padding-right--1"></i>
                             {{ fieldRelatedOffice.entity.fieldExternalLink.title }} {{ socialPlatform | capitalize }}
                           </a>
@@ -209,4 +224,4 @@
 
 {% include "src/site/includes/veteran-banner.html" %}
 {% include "src/site/includes/footer.html" %}
-{% include "src/site/includes/debug.drupal.liquid" %}
+{% include "src/site/includes/debug.drupal.liquid" %}
\ No newline at end of file
diff --git a/src/site/paragraphs/collapsible_panel.drupal.liquid b/src/site/paragraphs/collapsible_panel.drupal.liquid
index 9aabadc789..261569ae20 100644
--- a/src/site/paragraphs/collapsible_panel.drupal.liquid
+++ b/src/site/paragraphs/collapsible_panel.drupal.liquid
@@ -1,74 +1,68 @@
 {% comment %}
-  Example data:
-  {
-    "entity": {
-        "entityType": "paragraph",
-        "entityBundle": "collapsible_panel",
-        "fieldCollapsiblePanelMulti": false,
-        "fieldCollapsiblePanelExpand": false,
-        "fieldCollapsiblePanelBordered": false,
-        "fieldVaParagraphs": [
-            {
-                "entity": {
-                    "entityId": "391",
-                    "entityBundle": "collapsible_panel_item"
-                    "fieldTitle": "Will using mental health services at VA put my career at risk?",
-                    "fieldWysiwyg": {
-                        "processed": "..."
-                    }
-                }
-            }
-        }
-    }
-  }
+Example data:
+{
+"entity": {
+"entityType": "paragraph",
+"entityBundle": "collapsible_panel",
+"fieldCollapsiblePanelMulti": false,
+"fieldCollapsiblePanelExpand": false,
+"fieldCollapsiblePanelBordered": false,
+"fieldVaParagraphs": [
+{
+"entity": {
+"entityId": "391",
+"entityBundle": "collapsible_panel_item"
+"fieldTitle": "Will using mental health services at VA put my career at risk?",
+"fieldWysiwyg": {
+"processed": "..."
+}
+}
+}
+}
+}
+}
 {% endcomment %}
 <div
-    data-template="paragraphs/collapsible_panel"
-    data-entity-id="{{ entity.entityId }}"
-    data-multiselectable="{{ entity.fieldCollapsiblePanelMulti }}"
->
-    <va-accordion
-        {% if entity.fieldCollapsiblePanelBordered %}
-            bordered
-        {% endif %}
-    >
+  data-template="paragraphs/collapsible_panel"
+  data-entity-id="{{ entity.entityId }}"
+  data-multiselectable="{{ entity.fieldCollapsiblePanelMulti }}">
+  <va-accordion
+    {% if entity.fieldCollapsiblePanelBordered %}
+    bordered
+    {% endif %}>
     {% assign collapsibleHeaderH3 = entity.entityId | filterCollapsibleHeaderLevels %}
 
     {% if collapsibleHeaderH3 %}
-        {% assign panelHeaderLevel = collapsibleHeaderH3 %}
+      {% assign panelHeaderLevel = collapsibleHeaderH3 %}
     {% else %}
-        {% assign panelHeaderLevel = 'h4' %}
+      {% assign panelHeaderLevel = 'h4' %}
     {% endif %}
 
-        {% for accordionItem in entity.fieldVaParagraphs %}
-            {% assign item = accordionItem.entity %}
-            {% assign id = item.entityId %}
-            <va-accordion-item
-              class="va-accordion-item"
-              id="{{item.fieldTitle | hashReference: 30 }}-{{id}}"
-            >
+    {% for accordionItem in entity.fieldVaParagraphs %}
+      {% assign item = accordionItem.entity %}
+      {% assign id = item.entityId %}
+      <va-accordion-item class="va-accordion-item" id="{{item.fieldTitle | hashReference: 60 }}-{{id}}">
 
-                <{{ panelHeaderLevel }} slot="headline">
-                    {{ item.fieldTitle | encode }} 
-                </{{ panelHeaderLevel }}>
+        <{{ panelHeaderLevel }} slot="headline">
+          {{ item.fieldTitle | encode }}
+        </{{ panelHeaderLevel }}>
 
-                <div
-                    id={{id}}
-                    data-template="paragraphs/collapsible_panel__panel"
-                    data-entity-id="{{ item.entityId }}"
-                    data-analytics-faq-text="{{ item.fieldTitle | escape }}"
-                >
-                    <div id="{{ item.entityBundle }}-{{ item.entityId }}">
-                        {% include "src/site/paragraphs/wysiwyg.drupal.liquid" entity = item %}
+        <div
+          id={{id}}
+          data-template="paragraphs/collapsible_panel__panel"
+          data-entity-id="{{ item.entityId }}"
+          data-analytics-faq-text="{{ item.fieldTitle | escape }}">
+          <div id="{{ item.entityBundle }}-{{ item.entityId }}">
+            {% include "src/site/paragraphs/wysiwyg.drupal.liquid" entity = item %}
 
-                        {% for paragraph in item.fieldVaParagraphs %}
-                            {%  assign bundleComponent = "src/site/paragraphs/" | append: paragraph.entity.entityBundle | append: ".drupal.liquid" %}
-                            {% include {{ bundleComponent }} with entity = paragraph.entity %}
-                        {%  endfor %}
+            {% for paragraph in item.fieldVaParagraphs %}
+              {% assign bundleComponent = "src/site/paragraphs/" | append: paragraph.entity.entityBundle | append: ".drupal.liquid" %}
+              {% include {{ bundleComponent }} with entity = paragraph.entity %}
+            {% endfor %}
 
-                    </div>
-                </div>
-            </va-accordion-item>
-        {% endfor %}
-    </va-accordion>
-</div>
+          </div>
+        </div>
+      </va-accordion-item>
+    {% endfor %}
+  </va-accordion>
+</div>
\ No newline at end of file
diff --git a/src/site/paragraphs/q_a.collapsible_panel.drupal.liquid b/src/site/paragraphs/q_a.collapsible_panel.drupal.liquid
index 5f37a87cba..bf704d4e61 100644
--- a/src/site/paragraphs/q_a.collapsible_panel.drupal.liquid
+++ b/src/site/paragraphs/q_a.collapsible_panel.drupal.liquid
@@ -1,6 +1,6 @@
 <div data-template="paragraphs/q_a.collapsible_panel">
   <va-accordion>
-    
+
     {% assign questions = entity.fieldQuestions %}
     {% assign sectionHeader = entity.fieldSectionHeader %}
 
@@ -11,20 +11,18 @@
       <va-accordion-item
         class="va-accordion-item"
         header="{{ item.fieldQuestion }}"
-        id="{{ item.fieldQuestion | hashReference: 30 }}"
+        id="{{ item.fieldQuestion | hashReference: 60 }}"
         {% if level %}
-          level="{{ level }}"
-          {% else %}
-          level=3
-        {% endif %}
-      >
+        level="{{ level }}"
+        {% else %}
+        level=3
+        {% endif %}>
         <div
           id={{ id }}
           data-template="paragraphs/q_a.collapsible_panel__qa"
           data-entity-id="{{ id }}"
           data-analytics-faq-section="{{ sectionHeader | escape }}"
-          data-analytics-faq-text="{{ item.fieldQuestion | escape }}"
-        >
+          data-analytics-faq-text="{{ item.fieldQuestion | escape }}">
           <div id="{{ item.entityBundle }}-{{ id }}">
             {% for answer in item.fieldAnswer %}
               {% assign bundleComponent = "src/site/paragraphs/" | append: answer.entity.entityBundle | append: ".drupal.liquid" %}
@@ -35,4 +33,4 @@
       </va-accordion-item>
     {% endfor %}
   </va-accordion>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/site/paragraphs/q_a_group_collapsible_content.drupal.liquid b/src/site/paragraphs/q_a_group_collapsible_content.drupal.liquid
index 391d7d1535..54af73be52 100644
--- a/src/site/paragraphs/q_a_group_collapsible_content.drupal.liquid
+++ b/src/site/paragraphs/q_a_group_collapsible_content.drupal.liquid
@@ -13,7 +13,7 @@
 <va-accordion>
   {% for item in fieldQAs %}
     {% assign id = item.entityId %}
-    <va-accordion-item header="{{ item.entityLabel }}" id="{{ item.entityLabel | hashReference: 30 }}">
+    <va-accordion-item header="{{ item.entityLabel }}" id="{{ item.entityLabel | hashReference: 60}}">
       <div id={{ id }} data-entity-id="{{ id }}">
         <div id="{{ item.fieldAnswer.entity.entityBundle }}-{{ item.fieldAnswer.entity.entityId }}">
           {% if item.fieldAnswer %}