Add ability to collapse "people also ask"

This adds a step in the filter process to wrap the "people also ask"
section in a <details> element, which automatically collapses the
contents of the section. Clicking/tapping the details element expands
the view as normal.

See #113

app/filter.py

@@ -95,9 +95,26 @@ class Filter:
         if not self.main_divs:
             return
 
-        question_divs = [_ for _ in self.main_divs.find_all('div', recursive=False) if len(_.find_all('h2')) > 0]
+        question_divs = [_ for _ in self.main_divs.find_all(
+            'div', recursive=False
+            ) if len(_.find_all('h2')) > 0]
+
+        if len(question_divs) == 0:
+            return
+
+        # Wrap section in details element to allow collapse/expand
+        details = BeautifulSoup(features='lxml').new_tag('details')
+        summary = BeautifulSoup(features='lxml').new_tag('summary')
+        summary.string = question_divs[0].find('h2').text
+        question_divs[0].find('h2').decompose()
+        details.append(summary)
+        question_divs[0].wrap(details)
+
         for question_div in question_divs:
-            questions = [_ for _ in question_div.find_all('div', recursive=True) if _.text.endswith('?')]
+            questions = [_ for _ in question_div.find_all(
+                'div', recursive=True
+                ) if _.text.endswith('?')]
+
             for question in questions:
                 question['style'] = 'padding: 10px; font-style: italic;'
 

app/static/css/search-dark.css

@@ -32,4 +32,9 @@
 .autocomplete-active {
     background-color: #685e79 !important;
     color: #ffffff;
-}
+}
+
+details summary {
+    padding: 10px;
+    font-weight: bold;
+}

app/static/css/search.css

@@ -31,4 +31,9 @@
 .autocomplete-active {
     background-color: #685e79 !important;
     color: #ffffff;
-}
+}
+
+details summary {
+    padding: 10px;
+    font-weight: bold;
+}