make accordion arrows change direction when open or close
This commit is contained in:
parent
895b1d37d4
commit
d999315ad1
2 changed files with 21 additions and 5 deletions
11
app/static/js/about.js
Normal file
11
app/static/js/about.js
Normal 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 = '▶'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
|
@ -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">▶</span></span>
|
<span class="accordion-caret animated-title"><span class="text">▶</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">▶<!-- ▼ --></span></span>
|
<span class="accordion-caret animated-title"><span class="text">▶<!-- ▼ --></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">▶</span></span>
|
<span class="accordion-caret animated-title"><span class="text">▶</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">▶</span></span>
|
<span class="accordion-caret animated-title"><span class="text">▶</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">
|
||||||
|
@ -158,3 +158,8 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block end %}
|
||||||
|
<script src="{% static 'js/about.js' %}"></script>
|
||||||
|
|
||||||
|
{% endblock %}
|
||||||
|
|
Loading…
Reference in a new issue