Vanilla JS: Reveal only the next element at the same parent group

Question

I am trying to create few tabs - with loop. Then when you click on the tab's name which is a span, its expand(or hide) the next span, which is below it. The problem is that the function works only in the first created tab from the loop and if you click on the second/third, etc tab - the function triggers only at the first tab.

Was trying with querySelector and nextElementSibling without any success.

Using ejs template, express and vanilla javascript only.

This is the loop/tab.

<div>   
    <% listedProducts.forEach(function(product) { %>
        <div class="col">
            <span id="info" class="b-d"  onclick="hideReveal()">
                <%= product.name %>
            </span>
            <span>
                <img src="<%= product.logo %>" alt="">
                <p class="r-d"><%= product.supplierCompany %></p>
                <p class="r-d"><%= product.dateListed %></p>
                <p class="r-d"><%= product.dateApproved %></p>
                <p class="r-d"><%= product.supplierName %></p>
            </span>
        </div>
    <% }); %>
</div>

and the function

function hideReveal() {
    var tab = document.getElementById("info");
    if (tab.style.display === "none") {
        tab.style.display = "block";
    } else {
        tab.style.display = "none";
    }
}

Would like a little help, please. Thank you and have a nice weekend.

Answer 1

in your click handler, pass an event argument, eg, function clickHandler(evt) then say var thisTab = evt.target.id . This assumes you have an id attribute on the tab(s). Then you can toggle the open/closed class of thisTab's firstElementChild