so my current code works in the Nav to allow that button that's being looped with a matching index to toggle on and off each div. I don't want these divs to toggle, I want only the corresponding div to show and all the others display: none. Please advise
Thank you!
function showDiv(index) {
let one = document.getElementById('shopify-section-track_order_details');
let two = document.getElementById('shopify-section-returns_exchanges_details');
let three = document.getElementById('shopify-section-contact_us_details');
let four = document.getElementById('shopify-section-order_status_details');
let five = document.getElementById('shopify-section-shipping_returns_details');
let six = document.getElementById('shopify-section-corporate_details');
let seven = document.getElementById('shopify-section-product_help_details');
let eight = document.getElementById('shopify-section-ambassador_details');
let nine = document.getElementById('shopify-section-FAQ_details');
let arrHelp = [one, two, three, four, five, six, seven, eight, nine];
let el = arrHelp[index - 1];
if (el.style.display != "block") {
el.style.display = "block";
} else {
el.style.display = "none";
}
}
the link is in Shopify liquid calling the function like:
{% for block in section.blocks %}
<a id="pageLink" onclick="showDiv({{ forloop.index }})" >
{{ block.settings.button }}
<i id="navArrow{{ forloop.index }}" class="fad fa-chevron-right navArrow" style="float: right"></i>
</a>
{% endfor %}
function toggleDiv(index) {
const $target = document.querySelectorAll('[id*=shopify-section-]')[index];
$target.classList.toggle('hide');
}
toggleDiv(1);
.hide {
display:none;
}
#test {
display: flex;
}
#test > div {
padding: 15px;
background-color: #323232;
color: #e2e2e2;
margin: 2px;
}
<div id="test">
<div id="shopify-section-1">1</div>
<div id="shopify-section-2">2</div>
<div id="shopify-section-3">3</div>
<div id="shopify-section-4">4</div>
<div id="shopify-section-5">5</div>
<div id="shopify-section-6">6</div>
<div id="shopify-section-7">7</div>
<div id="shopify-section-8">8</div>
<div id="shopify-section-9">9</div>
<div id="shopify-section-10">10</div>
</div>