así que mi código actual funciona en Nav para permitir que ese botón que se está enlazando con un índice coincidente active y desactive cada div. No quiero que estos divs cambien, solo quiero que se muestre el div correspondiente y todos los demás: ninguno. por favor avise
¡Gracias!
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"; } }el enlace está en Shopify liquid llamando a la función como:
{% 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>