819 - Make template help more prominent

app/templates/partials/templates/guidance-character-count.html

@@ -1,8 +1,14 @@
-<h2 class="font-body-lg">Message length</h2>
-<p class="usa-body">
-  If your message is long then it will
-  cost more.
-</p>
-<p class="usa-body">
-  See <a class="usa-link" href="{{ url_for('.pricing') }}">pricing</a> for details.
-</p>
+<h3 class="usa-accordion__heading">
+  <button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="message-length">
+    Message length
+  </button>
+</h3>
+<div id="message-length" class="usa-accordion__content usa-prose">
+  <p class="usa-body">
+    If your message is long then it will
+    cost more.
+  </p>
+  <p class="usa-body">
+    See <a class="usa-link" href="{{ url_for('.pricing') }}">pricing</a> for details.
+  </p>
+</div>

app/templates/partials/templates/guidance-links.html

@@ -1,9 +1,15 @@
 {% from "components/components/inset-text/macro.njk" import usaInsetText %}
 
-<h2 class="font-body-lg">Links and URLs</h2>
-<p class="bottom-gutter-1-3">
-  Always use full URLs, starting with https://. For example:
-{{ usaInsetText({
-  "text": "Apply now at https://www.usa.gov/example",
-  "classes": "usa-body"})
-}}
+<h3 class="usa-accordion__heading">
+  <button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="links-and-urls">
+    Links and URLs
+  </button>
+</h3>
+<div id="links-and-urls" class="usa-accordion__content usa-prose">
+  <p>
+    Always use full URLs, starting with https://. For example:
+    {{ usaInsetText({
+    "text": "Apply now at https://www.usa.gov/example",
+    "classes": "usa-body"})
+    }}
+</div>

app/templates/partials/templates/guidance-optional-content.html

@@ -1,21 +1,25 @@
 {% from "components/components/inset-text/macro.njk" import usaInsetText %}
 
-<h2 class="font-body-lg">
-  Optional content
-</h2>
-<p class="usa-body">
-  Use double brackets and ‘??’ to define optional content.
-</p>
-<p class="bottom-gutter-1-3">
-  For example if you only want to show something to people who are under
-  18:
-</p>
-{{ usaInsetText({
+<h3 class="usa-accordion__heading">
+  <button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="m-a2">
+    Optional content
+  </button>
+</h3>
+<div id="m-a2" class="usa-accordion__content usa-prose">
+  <p class="usa-body">
+    Use double brackets and ‘??’ to define optional content.
+  </p>
+  <p class="bottom-gutter-1-3">
+    For example if you only want to show something to people who are under
+    18:
+  </p>
+  {{ usaInsetText({
   "text": "((under18??Please get your application signed by a parent or
   guardian.))",
   "classes": "usa-body"})
-}}
-<p class="usa-body">
-  For each person you send this message to, specify ‘yes’ or ‘no’ to
-  show or hide this content.
-</p>
+  }}
+  <p class="usa-body">
+    For each person you send this message to, specify ‘yes’ or ‘no’ to
+    show or hide this content.
+  </p>
+</div>

app/templates/partials/templates/guidance-personalisation.html

@@ -1,12 +0,0 @@
-{% from "components/components/inset-text/macro.njk" import usaInsetText %}
-
-<h2 class="font-body-lg">
-  Personalization
-</h2>
-<p class="bottom-gutter-1-3">
-  Use double brackets to personalize your message:
-</p>
-{{ usaInsetText({
-  "text": "Hello ((first name)), your reference is ((ref number))",
-  "classes": ""})
-}}

app/templates/partials/templates/guidance-personalization.html

@@ -0,0 +1,17 @@
+{% from "components/components/inset-text/macro.njk" import usaInsetText %}
+
+<h3 class="usa-accordion__heading">
+  <button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="personalization">
+    Personalization
+  </button>
+</h3>
+<div id="personalization" class="usa-accordion__content usa-prose">
+  <p class="bottom-gutter-1-3">
+    Use double brackets to personalize your message:
+  </p>
+  {{ usaInsetText({
+    "text": "Hello ((first name)), your reference is ((ref number))",
+    "classes": ""})
+  }}
+</div>
+