0x2620/phantasma
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

make accordion arrows change direction when open or close

Browse source
This commit is contained in:
Sanjay B 2021-10-24 21:24:09 +05:30
parent 895b1d37d4
commit d999315ad1
2 changed files with 21 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/static/js/about.js Normal file
View file

@ -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 = '▼'
} else {
caret.innerHTML = '▶'
}
})
})

15
app/templates/about.html
View file

@ -47,7 +47,7 @@
<li> <li>
<label for="bio-anushka" class="accordion-title"> <label for="bio-anushka" class="accordion-title">
<h3>Anushka Rajendran</h3> <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> </label>
<input type="checkbox" id="bio-anushka" class="accordion-checkbox"> <input type="checkbox" id="bio-anushka" class="accordion-checkbox">
<div class="accordion-content"> <div class="accordion-content">
@ -58,7 +58,7 @@
<li> <li>
<label for="bio-padma" class="accordion-title"> <label for="bio-padma" class="accordion-title">
<h3>Pad.ma</h3> <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> </label>
<input type="checkbox" id="bio-padma" class="accordion-checkbox"> <input type="checkbox" id="bio-padma" class="accordion-checkbox">
<div class="accordion-content"> <div class="accordion-content">
@ -72,7 +72,7 @@
<li> <li>
<label for="bio-annotation" class="accordion-title"> <label for="bio-annotation" class="accordion-title">
<h3>Annotation Collaborators</h3> <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> </label>
<input type="checkbox" id="bio-annotation" class="accordion-checkbox"> <input type="checkbox" id="bio-annotation" class="accordion-checkbox">
<div class="accordion-content"> <div class="accordion-content">
@ -83,7 +83,7 @@
<li> <li>
<label for="bio-acknowledgements" class="accordion-title"> <label for="bio-acknowledgements" class="accordion-title">
<h3>Acknowledgements</h3> <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> </label>
<input type="checkbox" id="bio-acknowledgements" class="accordion-checkbox"> <input type="checkbox" id="bio-acknowledgements" class="accordion-checkbox">
<div class="accordion-content"> <div class="accordion-content">
@ -157,4 +157,9 @@
<p>本計畫由國立臺灣美術館策劃，文化部指導、財團法人文化臺灣基金會支持、SEA plateaus協力。</p> <p>本計畫由國立臺灣美術館策劃，文化部指導、財團法人文化臺灣基金會支持、SEA plateaus協力。</p>
</div> </div>
{% endblock %} {% endblock %}
{% block end %}
<script src="{% static 'js/about.js' %}"></script>
{% endblock %}