how do i make eye icon visible when accordion open

Question

Hello dear stackoverflow users. I have an accordion. When this accordion is open, I want to make the invisible eye icon next to it visible. But which accordion is clicked, only its eye icon will open. Please help me:)

My code:

 var collapsebtn = document.querySelectorAll('.data-toggle'); var eyes = document.querySelectorAll('.eye'); for (i = 0; i < collapsebtn.length; i++) { collapsebtn[i].addEventListener('click', function() { eyes[i].classList.remove('d-none'); }) }

 <a class="data-toggle" style="text-decoration: none;" data-toggle="collapse" href="#index1" role="button" aria-expanded="false" aria-controls="collapseExample"> <div class="request-table row flex-wrap mt-4 border-bottom fw-bold mb-2 pb-4"> <div class="col-6">PPGI Stell</div> <div class="col-3">10.000</div> <div class="col-3">Tons <span class="d-none eye"><i class="far fa-eye"></i></span></div> </div> </a> <div class="collapse" id="index1"> <div class="card card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div> </div> <a class="data-toggle" style="text-decoration: none;" data-toggle="collapse" href="#index2" role="button" aria-expanded="false" aria-controls="collapseExample"> <div class="request-table row flex-wrap mt-5 border-bottom fw-bold mb-5 pb-4"> <div class="col-6">Steel Cable </div> <div class="col-3">1400</div> <div class="col-3">Meters<span class="d-none eye"><i class="far fa-eye"></i></span></div> </div> </a> <div class="collapse" id="index2"> <div class="card card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div> </div> <a class="data-toggle" style="text-decoration: none;" data-toggle="collapse" href="#index3" role="button" aria-expanded="false" aria-controls="collapseExample"> <div class="request-table row flex-wrap mt-5 border-bottom fw-bold mb-5 pb-4"> <div class="col-6">HDPE Molding Plastic</div> <div class="col-3">1400</div> <div class="col-3">Tons<span class="d-none eye"><i class="far fa-eye"></i></span></div> </div> </a> <div class="collapse" id="index3"> <div class="card card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div> </div>

Answer 1

You can iterate througth forEach callback, and get the index from argument and make reference to the eye via the index, the function is this: https://developer.mozilla.org/es/docs/Web/API/NodeList/forEach

 let collapsebtn = document.querySelectorAll('.data-toggle'); let eyes = document.querySelectorAll('.eye'); //console.log(eyes); //console.log(collapsebtn); collapsebtn.forEach(function(element, index){ element.addEventListener('click', function() { eyes[index].classList.remove('d-none'); }); });

 <a class="data-toggle" style="text-decoration: none;" data-toggle="collapse" href="#index1" role="button" aria-expanded="false" aria-controls="collapseExample"> <div class="request-table row flex-wrap mt-4 border-bottom fw-bold mb-2 pb-4"> <div class="col-6">PPGI Stell</div> <div class="col-3">10.000</div> <div class="col-3">Tons <span class="d-none eye"><i class="far fa-eye"></i></span></div> </div> </a> <div class="collapse" id="index1"> <div class="card card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div> </div> <a class="data-toggle" style="text-decoration: none;" data-toggle="collapse" href="#index2" role="button" aria-expanded="false" aria-controls="collapseExample"> <div class="request-table row flex-wrap mt-5 border-bottom fw-bold mb-5 pb-4"> <div class="col-6">Steel Cable </div> <div class="col-3">1400</div> <div class="col-3">Meters<span class="d-none eye"><i class="far fa-eye"></i></span></div> </div> </a> <div class="collapse" id="index2"> <div class="card card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div> </div> <a class="data-toggle" style="text-decoration: none;" data-toggle="collapse" href="#index3" role="button" aria-expanded="false" aria-controls="collapseExample"> <div class="request-table row flex-wrap mt-5 border-bottom fw-bold mb-5 pb-4"> <div class="col-6">HDPE Molding Plastic</div> <div class="col-3">1400</div> <div class="col-3">Tons<span class="d-none eye"><i class="far fa-eye"></i></span></div> </div> </a> <div class="collapse" id="index3"> <div class="card card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div> </div>