Collapsible?

app.py

@@ -36,6 +36,28 @@ qa_data = load_dataset("ebrowne/test-data", data_files = "test.json")
 q = qa_data["train"][0] # loaded question data
 """
 
+# JAVASCRIPT: for collapsible
+js = """
+async () => {
+    addCollapsible = () => {
+        var coll = document.getElementsByClassName("collapsible");
+        var i;
+
+        for (i = 0; i < coll.length; i++) {
+        coll[i].addEventListener("click", function() {
+            this.classList.toggle("active");
+            var content = this.nextElementSibling;
+            if (content.style.display === "block") {
+            content.style.display = "none";
+            } else {
+            content.style.display = "block";
+            }
+        });
+        }
+    }
+}
+"""
+
 # VARIABLES: will eventually be loaded with JSON from a dataset 
 
 """
@@ -117,71 +139,11 @@ with gr.Blocks() as user_eval:
             step += 1
             print(eval_1 + eval_2 + eval_3)
             if step == len(passage_texts):
-                collapsible_string = """
-                    <style>
-                    /* Style the button that is used to open and close the collapsible content */
-                    .collapsible {
-                        background-color: #eee;
-                        color: #444;
-                        cursor: pointer;
-                        padding: 18px;
-                        width: 100%;
-                        border: none;
-                        text-align: left;
-                        outline: none;
-                        font-size: 15px;
-                    }
-                    .collapsible:after {
-                        content: '\02795'; /* Unicode character for "plus" sign (+) */
-                        font-size: 13px;
-                        color: white;
-                        float: right;
-                        margin-left: 5px;
-                    }
-
-                    .active:after {
-                        content: "\2796"; /* Unicode character for "minus" sign (-) */
-                    }
-
-                    /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
-                    .active, .collapsible:hover {
-                    background-color: #ccc;
-                    }
-
-                    /* Style the collapsible content. Note: hidden by default */
-                    .content {
-                    padding: 0 18px;
-                    display: none;
-                    overflow: hidden;
-                    background-color: #f1f1f1;
-                    }
-                    </style>
-                    """
                 for i, passage in enumerate(passage_texts):
                     collapsible_string += """
-                            <button type="button" class="collapsible">Passage """ + str(i + 1) + """</button>
-                            <div class="content">
+                            <strong>Passage """ + str(i + 1) + """</strong>
                             <p> """ + passage + """ </p>
-                            </div>
                             """
-                collapsible_string += """
-                    <script>
-                        var coll = document.getElementsByClassName("collapsible");
-                        var i;
-
-                        for (i = 0; i < coll.length; i++) {
-                        coll[i].addEventListener("click", function() {
-                            this.classList.toggle("active");
-                            var content = this.nextElementSibling;
-                            if (content.style.display === "block") {
-                            content.style.display = "none";
-                            } else {
-                            content.style.display = "block";
-                            }
-                        });
-                        }
-                    </script>
-                    """
                 return {
                     selection: gr.HTML(collapsible_string),
                     scores_p: gr.Column(visible = False),
@@ -245,6 +207,6 @@ with gr.Blocks() as user_eval:
             s.click(fn = submit_email, inputs = [email], outputs = [question, login])
 
 # Starts on question, switches to evaluation after the user answers
-user_eval.launch()
+user_eval.launch(js = js)
 
 # https://github.com/gradio-app/gradio/issues/5791