Ссылка Codepen.
У меня 6 родительских аккордеонных ссылок, все с детьми.Слева они содержат шрифт со знаком «плюс».
Я хочу, чтобы при нажатии переключить знак «плюс» на знак «минус».
В настоящее время моя переменная plusSign захватывает только первый плюсзнак, чтобы показать, что он работает (используя const plusSign = document.querySelector('.fa-plus');).
Отлично работает для первой ссылки.Однако я хочу, чтобы это затронуло всех экземпляров.
Я пытался использовать querySelectorAll (const plusSign = document.querySelectorAll('.fa-plus');), но он просто не работает вообще.
Кодпо ссылке выше, но вот код ниже на всякий случай:
HTML:
<!--Quick Link Box-->
<section class="quick-link-box">
<div class="columns is-desktop">
<div class="column">
<div class="card quick-link-card quick-link-card-mobile" tabindex="0">
<ul>
<li>
<a class="parent accordion" tabindex="0"><i class="fa fa-plus" aria-hidden="true"></i> Control & Automation</a>
<div class="panel">
<ul class="child">
<li><a href="#">Molded Machine Tool Industrial Control Transformer</a></li>
<li><a href="#">Industrial Open Core & Coil Control Transformer</a></li>
<li><a href="#">General Purpose Enclosed Transformer</a></li>
<li><a href="#">Encapsulated Control Transformer</a></li>
<li><a href="#">Energy Efficient Drive Isolation Transformer (Gen. 3)</a></li>
<li><a href="#">Energy Efficient Drive Isolation Transformer (Gen. 2)</a></li>
<li><a href="#">Drive Isolation Transformer (Gen. 1)</a></li>
<li><a href="#">Reactors</a></li>
<li><a href="#">DV/DT Filter</a></li>
<li><a href="#">Motor Starting Autotransformers</a></li>
</ul>
</div>
</li>
<li>
<a class="parent accordion" tabindex="0"><i class="fa fa-plus" aria-hidden="true"></i> Medium Voltage Distribution</a>
<div class="panel">
<ul class="child">
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#">Link #3</a></li>
</ul>
</div>
</li>
<li>
<a class="parent accordion" tabindex="0"><i class="fa fa-plus" aria-hidden="true"></i> Low Voltage Distribution</a>
<div class="panel">
<ul class="child">
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#">Link #3</a></li>
</ul>
</div>
</li>
<li>
<a class="parent accordion" tabindex="0"><i class="fa fa-plus" aria-hidden="true"></i> Encapsulated & Specialty</a>
<div class="panel">
<ul class="child">
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#">Link #3</a></li>
</ul>
</div>
</li>
<li>
<a class="parent accordion" tabindex="0"><i class="fa fa-plus" aria-hidden="true"></i> Custom Products</a>
<div class="panel">
<ul class="child">
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#">Link #3</a></li>
</ul>
</div>
</li>
<li>
<a class="parent accordion" tabindex="0"><i class="fa fa-plus" aria-hidden="true"></i> OEM Products</a>
<div class="panel">
<ul class="child">
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#">Link #3</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
JS:
const plusSign = document.querySelector('.fa-plus');
let acc = document.getElementsByClassName("accordion");
let i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
/* Toggle between hiding and showing the active panel */
let panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
plusSign.classList.remove('fa-minus');
plusSign.classList.add('fa-plus');
} else {
panel.style.display = "block";
plusSign.classList.remove('fa-plus');
plusSign.classList.add('fa-minus');
}
});
}