use template for remaining accordions

_data/nav.yml

@@ -34,7 +34,7 @@ footer_sections:
     url: '$BASE_URL/accessibility/'
   - label: Join us
     url: '$BASE_URL/join/'
-  - label: Privacy & Security
+  - label: Privacy & Security
     url: '$BASE_URL/policy/'
 - heading: Support
   links:

_layouts/documentation.html

@@ -35,9 +35,9 @@ <h1 class="usa-display padding-bottom-4">{{ page.title }}</h1>
           {{ content }}
 
           <a href="{{ site.github_repo_url }}/edit/main/{{ page.path }}" class="usa-button usa-button--outline margin-top-9">Edit this page</a>
-          </div>
+        </div>
 
-          <a href="#" class="usa-button usa-button--outline return-to-top-button desktop:display-none position-fixed bottom-205 right-105 width-5 height-5 text-middle radius-pill z-500 shadow-2"><img alt="Return to top" class="display-inline maxw-3 width-3 height-3 position-absolute left-1 top-1" src="{{ site.baseurl }}/assets/img/material-icons/expand_less.svg"/></a>
+        <a href="#" class="usa-button usa-button--outline return-to-top-button desktop:display-none position-fixed bottom-205 right-105 width-5 height-5 text-middle radius-pill z-500 shadow-2"><img alt="Return to top" class="display-inline maxw-3 width-3 height-3 position-absolute left-1 top-1" src="{{ site.baseurl }}/assets/img/material-icons/expand_less.svg"/></a>
       </div>
     {% else %}
       <div class="usa-layout-docs__main desktop:grid-col-9 desktop:grid-offset-2 usa-prose">

_pages/saml/getting-started.md

@@ -102,27 +102,39 @@ Consistent with the [SAML metadata specification](https://docs.oasis-open.org/se
 ### Signing Certificates
 Below you can find the X509 certificates used by the Login.gov IdP to sign SAML requests. **Do not enter these certificates in the Portal when configuring an application for testing** - you can follow the instructions in our [testing article]({% link _pages/testing.md %}#creating-a-public-certificate) to generate a client certificate.
 
-<div class="usa-accordion--bordered">
-  <button class="usa-accordion__button" aria-controls="sandbox-cert-{{ site.data.saml.year.current }}">
-    View {{ site.data.saml.year.current }} <strong>sandbox</strong> certificate
-  </button>
-  <div id="sandbox-cert-{{ site.data.saml.year.current }}" class="usa-accordion__content" markdown="1">
+{% capture saml_cert_sandbox_title %}
+  View {{ site.data.saml.year.current }} <strong>sandbox</strong> certificate
+{% endcapture %}
+{% capture saml_cert_sandbox_content %}
+<div id="sandbox-cert-{{ site.data.saml.year.current }}" markdown="1">
 ```
 {{ site.data.saml.certs.sandbox }}
 ```
-  </div>
 </div>
-
-<div class="usa-accordion--bordered margin-top-2">
-  <button class="usa-accordion__button" aria-controls="production-cert-{{ site.data.saml.year.current }}">
+{% endcapture %}
+<dl class="usa-accordion--bordered margin-top-2">
+{% include accordion.html id="current-sandbox-saml-cert"
+                          accordion_id="current_sandbox_saml_cert"
+                          title=saml_cert_sandbox_title
+                          content=saml_cert_sandbox_content
+%}
+
+{% capture saml_cert_production_title %}
   View {{ site.data.saml.year.current }} <strong>production</strong> certificate
-  </button>
-  <div id="production-cert-{{ site.data.saml.year.current }}" class="usa-accordion__content" markdown="1">
+{% endcapture %}
+{% capture saml_cert_production_content %}
+<div id="production-cert-{{ site.data.saml.year.current }}"  markdown="1">
 ```
 {{ site.data.saml.certs.production }}
 ```
-  </div>
 </div>
+{% endcapture %}
+{% include accordion.html id="current-production-saml-cert"
+                          accordion_id="current_production_saml_cert"
+                          title=saml_cert_production_title
+                          content=saml_cert_production_content
+%}
+</dl>
 
 #### Annual Certificate Rotation
 

_pages/saml/logout.md

@@ -45,26 +45,29 @@ All logout requests must be signed — we require RSA SHA-256 signatures embedde
         </section>
     </div>
 </div>
-<div class="grid-row grid-gap">
-    <div class="desktop:grid-col-7 mobile:grid-col-full" markdown="1">
 
+<div class="grid-row grid-gap">
+    <div class="desktop:grid-col-7 mobile:grid-col-full">
+<div markdown="1">
 ### Logout response
 
 After, Login.gov will redirect and POST a form back to your registered Assertion Consumer Service Logout URL:
 
 Note: the SAMLResponse does not contain a signature since it's simply acknowledging the logout request.
+</div>
 
-
-  <div class="usa-accordion--bordered margin-top-2">
-    <button class="usa-accordion__button" aria-controls="attributes">
-    Remote logout (deprecated)
-    </button>
-    <div id="attributes" class="usa-accordion__content">
-        {% include snippets/saml/logout/remote_logout.md %}
+{% capture remote_logout %}
+  {% include snippets/saml/logout/remote_logout.md %}
+{% endcapture %}
+      <dl class="usa-accordion--bordered margin-top-2">
+        {% include accordion.html id="remotelogout"
+                                  accordion_id="remote-logout"
+                                  title="Remote logout (deprecated)"
+                                  content=remote_logout
+        %}
+      </dl>
     </div>
-  </div>
-</div>
- <div class="usa-layout-docs__main code-snippet-column desktop:grid-col-5">
+    <div class="usa-layout-docs__main code-snippet-column desktop:grid-col-5">
         <section class="code-snippet-section margin-top-2 position-relative z-index-1">
             <button id="saml_logout_response_tab1_button" data-selector="saml_logout_response" class="code-button code-button__selected margin-left-2">Request</button>
             <button id="saml_logout_response_tab2_button" data-selector="saml_logout_response" class="code-button margin-left-2">Example</button>
@@ -76,3 +79,4 @@ Note: the SAMLResponse does not contain a signature since it's simply acknowledg
             </section>
         </section>
     </div>
+</div>