FAQ filter: Start on making text expandable

content/concepts/introduction/technical-faq.md

@@ -6,6 +6,7 @@ labels:
   - Blockchain
 #top_nav_grouping: Questions
 template: page-faq2.html.jinja
+sidebar: disabled
 eyebrow_text: Your Questions About XRPL, Answered
 filters:
   - faq

styles/_pages.scss

@@ -194,6 +194,12 @@
   width: 100%;
 }
 
+.q-wrapper {
+  background: $gray-800;
+  border-radius: $border-radius-sm;
+  padding: 2rem;
+}
+
 .page-docs-index {
   background: url(../img/backgrounds/bg-docs.png) no-repeat;
   background-position-x: left -20vw;

tool/filter_faq.py

@@ -8,24 +8,49 @@
 from bs4 import NavigableString
 
 Q_TAG = "h4"
+SECTION_TAG = "h2"
+
+def append_chevron(el):
+    """
+    Adds markup for a CSS-animated chevron to an element, in the form of:
+    <span class="chevron">
+        <span></span>
+        <span></span>
+    </span>
+    """
+    chev = el.new_tag("span")
+    chev["class"] = "chevron"
+    chev.extend([chev.new_tag("span")] for i in range(2))
+    el.append(chev)
 
 def filter_soup(soup, **kwargs):
     qs = soup.find_all(Q_TAG)
 
-    for q in qs:
+    for qi, q in enumerage(qs):
         stuff_to_wrap = []
         el = q
         while el.next_sibling:
             el = el.next_sibling
             if isinstance(el, NavigableString):
                 stuff_to_wrap.append(el)
-            elif el.name != Q_TAG:
+            elif el.name == Q_TAG:
-                stuff_to_wrap.append(el)
-            else:
                 # We probably found the next question, stop here
                 break
+            elif el.name == SECTION_TAG:
+                # End of the section, definitely stop here
+                break
+            else:
+                stuff_to_wrap.append(el)
 
-        wrapper = soup.new_tag("div", class_="q-wrapper")
+        answer_wrapper = soup.new_tag("div")
-        [wrapper.append(el) for el in stuff_to_wrap]
+        answer_wrapper["id"] = "a{qi}".format(qi=qi)
-        q.replace_with(wrapper)
+        answer_wrapper["class"] = "a-wrapper"
+
+        [answer_wrapper.append(el) for el in stuff_to_wrap]
+
+        q_wrapper = soup.new_tag("div")
+        q_wrapper.append(answer_wrapper)
+        q_wrapper["class"]="q-wrapper"
+        q.replace_with(q_wrapper)
+        append_chevron(q)
         wrapper.insert(0, q)