I have this code, i need to change JS code for use it on all navigation class names. The purpose is to create a drop down menu but the javascript code takes only the first of the elements with class name navigation.
On inquiring I found out we need to use a querySellectorAll but I can't get it to work.
I give you below the code that works for only one object hoping someone will be able to show me how to use it for all objects with class name navigation. Thanks for your help.
let navigation = document.querySelector('.navigation');
navigation.onclick = function() {
navigation.classList.toggle('active')
}.active {
color: blue;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<div class="navigation">
<ul>
<span><i class="fa-regular fa-pen-to-square"></i></span>
<span><i class="fa-regular fa-heart"></i></span>
<span><i class="fa-regular fa-trash-can"></i></span>
<div id="marker"></div>
</ul>
</div>
<div class="navigation">
<ul>
<span><i class="fa-regular fa-pen-to-square"></i></span>
<span><i class="fa-regular fa-heart"></i></span>
<span><i class="fa-regular fa-trash-can"></i></span>
<div id="marker"></div>
</ul>
</div>
<div class="navigation">
<ul>
<span><i class="fa-regular fa-pen-to-square"></i></span>
<span><i class="fa-regular fa-heart"></i></span>
<span><i class="fa-regular fa-trash-can"></i></span>
<div id="marker"></div>
</ul>
</div>Use querySelectorAll instead of querySelector
let navigation = document.querySelectorAll('.navigation');
navigation.forEach(e=>{
e.onclick = function() {
e.classList.toggle('active')
}
});
.active {
color: blue;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<div class="navigation">
<ul>
<span><i class="fa-regular fa-pen-to-square"></i></span>
<span><i class="fa-regular fa-heart"></i></span>
<span><i class="fa-regular fa-trash-can"></i></span>
<div id="marker"></div>
</ul>
</div>
<div class="navigation">
<ul>
<span><i class="fa-regular fa-pen-to-square"></i></span>
<span><i class="fa-regular fa-heart"></i></span>
<span><i class="fa-regular fa-trash-can"></i></span>
<div id="marker"></div>
</ul>
</div>
<div class="navigation">
<ul>
<span><i class="fa-regular fa-pen-to-square"></i></span>
<span><i class="fa-regular fa-heart"></i></span>
<span><i class="fa-regular fa-trash-can"></i></span>
<div id="marker"></div>
</ul>
</div>