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>
|
||||
<label for="bio-anushka" class="accordion-title">
|
||||
<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>
|
||||
<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">▶<!-- ▼ --></span></span>
|
||||
<span class="accordion-caret animated-title"><span class="text">▶<!-- ▼ --></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">▶</span></span>
|
||||
<span class="accordion-caret animated-title"><span class="text">▶</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">▶</span></span>
|
||||
<span class="accordion-caret animated-title"><span class="text">▶</span></span>
|
||||
</label>
|
||||
<input type="checkbox" id="bio-acknowledgements" class="accordion-checkbox">
|
||||
<div class="accordion-content">
|
||||
|
@ -158,3 +158,8 @@
|
|||
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block end %}
|
||||
<script src="{% static 'js/about.js' %}"></script>
|
||||
|
||||
{% endblock %}
|
||||
|
|
Loading…
Reference in a new issue