The discussion collapse works

uab-cgds-worthey · Sep 22, 2023 · 00d6da4 · 00d6da4
1 parent 378460a
commit 00d6da4
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/frontend/src/components/AnalysisView/DiscussionSection.vue b/frontend/src/components/AnalysisView/DiscussionSection.vue
@@ -1,11 +1,11 @@
 <template>
     <div class="rosalution-section-container">
-        <input type="checkbox" v-bind:id="section_toggle" />
+        <input type="checkbox" id="discussion_toggle" />
         <div class="rosalution-section-header">
             <h2 class="rosalution-section-header-text">Discussion</h2>
             <span class="rosalution-section-center" data-test="header-datasets"/>
             <button class="primary-button new-discussion-button">New Discussion</button>
-            <label class="collapsable-icon" v-bind:for="section_toggle">
+            <label class="collapsable-icon" for="discussion_toggle">
                 <font-awesome-icon icon="chevron-down" size="lg"/>
             </label>
         </div>
@@ -47,4 +47,12 @@ input[type="checkbox"] {
     display: none;
 }
 
+.rosalution-section-container input[type="checkbox"]:checked ~ .section-content {
+    display: none;
+}
+
+input[type="checkbox"]:checked ~ .rosalution-section-header > span ~ label.collapsable-icon {
+    transform: scaleY(-1);
+}
+
 </style>