From d999315ad1257078adde3b3a3922efb84a2d42f3 Mon Sep 17 00:00:00 2001
From: Sanjay B <sanjaybhangar@gmail.com>
Date: Sun, 24 Oct 2021 21:24:09 +0530
Subject: [PATCH] make accordion arrows change direction when open or close

---
 app/static/js/about.js   | 11 +++++++++++
 app/templates/about.html | 15 ++++++++++-----
 2 files changed, 21 insertions(+), 5 deletions(-)
 create mode 100644 app/static/js/about.js

diff --git a/app/static/js/about.js b/app/static/js/about.js
new file mode 100644
index 0000000..6adc59d
--- /dev/null
+++ b/app/static/js/about.js
@@ -0,0 +1,11 @@
+document.querySelectorAll('.accordion-checkbox').forEach(cbox => {
+    cbox.addEventListener('change', function() {
+        const label = this.previousElementSibling
+        const caret = label.querySelector('.text')
+        if (cbox.checked) {
+            caret.innerHTML = '&#9660;'
+        } else {
+            caret.innerHTML = '&#x25b6;'
+        }
+    })
+})
\ No newline at end of file
diff --git a/app/templates/about.html b/app/templates/about.html
index 4f349b6..0e9681e 100755
--- a/app/templates/about.html
+++ b/app/templates/about.html
@@ -47,7 +47,7 @@
                 <li>
                     <label for="bio-anushka" class="accordion-title">
                        <h3>Anushka Rajendran</h3>
-                       <span class="accordion-caret animated-title"><span class="text js-accordion-icon-toggle">&#x25b6;</span></span>
+                       <span class="accordion-caret animated-title"><span class="text">&#x25b6;</span></span>
                     </label>
                     <input type="checkbox" id="bio-anushka" class="accordion-checkbox">
                     <div class="accordion-content">
@@ -58,7 +58,7 @@
                 <li>
                     <label for="bio-padma" class="accordion-title">
                        <h3>Pad.ma</h3>
-                       <span class="accordion-caret animated-title"><span class="text js-accordion-icon-toggle">&#x25b6;<!-- &#9660; --></span></span>
+                       <span class="accordion-caret animated-title"><span class="text">&#x25b6;<!-- &#9660; --></span></span>
                     </label>
                     <input type="checkbox" id="bio-padma" class="accordion-checkbox">
                     <div class="accordion-content">
@@ -72,7 +72,7 @@
                 <li>
                     <label for="bio-annotation" class="accordion-title">
                        <h3>Annotation Collaborators</h3>
-                       <span class="accordion-caret animated-title"><span class="text js-accordion-icon-toggle">&#x25b6;</span></span>
+                       <span class="accordion-caret animated-title"><span class="text">&#x25b6;</span></span>
                     </label>
                     <input type="checkbox" id="bio-annotation" class="accordion-checkbox">
                     <div class="accordion-content">
@@ -83,7 +83,7 @@
                 <li>
                     <label for="bio-acknowledgements" class="accordion-title">
                        <h3>Acknowledgements</h3>
-                       <span class="accordion-caret animated-title"><span class="text js-accordion-icon-toggle">&#x25b6;</span></span>
+                       <span class="accordion-caret animated-title"><span class="text">&#x25b6;</span></span>
                     </label>
                     <input type="checkbox" id="bio-acknowledgements" class="accordion-checkbox">
                     <div class="accordion-content">
@@ -157,4 +157,9 @@
 <p>本計畫由國立臺灣美術館策劃，文化部指導、財團法人文化臺灣基金會支持、SEA plateaus協力。</p>
 
 </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
+
+{% block end %} 
+    <script src="{% static 'js/about.js' %}"></script>
+
+{% endblock %}