Merge pull request Expensify#33276 from rushatgabhane/collapse-faq

[HelpDot] Make FAQ section collapsible

docs/TEMPLATE.md

@@ -21,7 +21,7 @@ What options does a user have then interacting with this feature?
 What elements of this feature are pay-walled vs. free?
 -->
 
-# FAQ
+{% include faq-begin.md %}
 <!--
 This section covers the useful but not as vital information, it should capture commonly queried elements which do not organically form part of the About or How-to sections.
 
@@ -32,6 +32,7 @@ This section covers the useful but not as vital information, it should capture c
 - Is there any general troubleshooting for this feature?
  - Note: troubleshooting should generally go in the FAQ, but if there is extensive troubleshooting, such as with integrations, that will be housed in a separate page, stored with and linked from the main page for that feature.
 -->
+{% include faq-end.md %}
 
 # Deep Dive
 <!--

docs/_includes/faq-begin.md

@@ -0,0 +1,4 @@
+{::options parse_block_html="true" /}
+<details>
+{::options parse_block_html="false" /}
+<summary>FAQ</summary> {: #faq}

docs/_includes/faq-end.md

@@ -0,0 +1 @@
+</details>

docs/_sass/_main.scss

@@ -46,7 +46,6 @@ blockquote {
 
 article,
 aside,
-details,
 figcaption,
 figure,
 footer,
@@ -55,8 +54,7 @@ hgroup,
 main,
 menu,
 nav,
-section,
-summary {
+section {
     display: block;
 }
 
@@ -99,7 +97,8 @@ h2,
 h3,
 h4,
 h5,
-h6 {
+h6, 
+summary {
     color: $color-text;
     font-weight: bold;
     padding-bottom: 12px;
@@ -113,7 +112,25 @@ h6 {
     margin-top: 20px;
 }
 
-h1 {
+#faq::marker {
+    font-size: 1.5em;
+}
+
+details summary { 
+    cursor: pointer;
+    user-select: none;
+}
+
+details > summary {
+    list-style-image: url("/assets/images/arrow-right.svg");
+}
+
+details[open] > summary {
+    list-style-image: url("/assets/images/down.svg");
+}
+
+h1, 
+summary {
     font-family: "ExpensifyNewKansas", "Helvetica Neue", "Helvetica", Arial, sans-serif;
     font-weight: 500;
     font-size: larger;
@@ -398,7 +415,7 @@ button {
             flex-wrap: wrap;
         }
 
-        h1 {
+        h1, summary {
             font-size: 1.5em;
             padding: 20px 0 12px 0;
         }

docs/articles/expensify-classic/getting-started/Using-The-App.md

@@ -39,7 +39,9 @@ SmartScan's performance can vary depending on factors such as receipt quality, l
 **Receipt quality**: The clarity and condition of a receipt can impact SmartScan's accuracy. For best results, ensure your environment is well-lit and the receipt is straight and free of obstructions.
 **Language support**: While SmartScan supports multiple languages, its accuracy may differ from one language to another. Users dealing with non-English receipts should be aware of potential variations in data extraction.
 **Handwriting recognition**: Handwritten receipts might pose challenges for SmartScan. In such cases, manual verification may be necessary to ensure accurate data entry.
-# FAQ
+
+{% include faq-begin.md %}
+
 ## Can I use the mobile app for both personal and business expenses?
 Yes, you can use Expensify for personal and business expenses. It's versatile and suitable for both individual and corporate use. Check out our personal and business plans [here](https://www.expensify.com/pricing) to see what might be right for you.
 ## Is it possible to categorize and tag expenses on the mobile app?
@@ -50,3 +52,5 @@ If you experience issues, first make sure you’re using the most recent version
 Expensify takes security seriously and employs encryption and other security measures to protect your data. It's important to use strong, unique passwords and enable device security features like biometric authentication.
 ## Can I use the mobile app offline, and will my data sync when I'm back online?
 Yes, you can use the mobile app offline to capture receipts and create expenses. The app will sync your data once you have an internet connection.
+
+{% include faq-end.md %}

docs/assets/js/main.js

@@ -190,6 +190,7 @@ window.addEventListener('DOMContentLoaded', () => {
             // Disable the collapsible functionality of the library by
             // setting the maximum number of heading levels (6)
             collapseDepth: 6,
+            headingSelector: 'h1, h2, h3, summary',
 
             // Main class to add to lists.
             listClass: 'lhn-items',