Personalized checkout and custom promotions with Shopify Scripts
Hello,
I have three meta fields loaded onto my product pages. When I load the page, they are all open and visible. I just want the first tab Open and the rest to open when clicked. How can I do this? Below is my code and I am attaching what the page looks like right now! FYI there is nothing under reviews or drafts at the moment, so the tabs are not visible!
This is my URL: https://newagewalls.com/products/custom-baby-portrait-hand-made-illustrations-digital-or-framed
<div class="tabs-area">
<div class="tab">
{% if product.metafields.my_feild.description != blank %}
<button class="tablinks" onclick="openTab(event, 'tab1')">How To Order </button>
{% endif %}
{% if product.tags contains 'options' %}
{% if product.metafields.my_fields.options != blank %}
<button class="tablinks" onclick="openTab(event, 'tab2')">Drafts </button>
{% endif %}
{% endif %}
{% if product.metafields.my_fields.order != blank %}
<button class="tablinks" onclick="openTab(event, 'tab3')">Manufacturing </button>
{% endif %}
{% if product.metafields.my_fields.frames != blank %}
<button class="tablinks" onclick="openTab(event, 'tab4')">FAQ </button>
{% endif %}
{% if product.metafields.my_fields.reviews != blank %}
<button class="tablinks" onclick="openTab(event, 'tab5')">reviews </button>
{% endif %}
</div>
<div class="tab__inner-text">
{% if product.metafields.my_feild.description != blank %}
<div id="tab1" class="tabcontent">
{{ product.metafields.my_feild.description }}
</div>
{% endif %}
{% if product.metafields.my_fields.options != blank %}<div id="tab2" class="tabcontent">
{{ product.metafields.my_fields.options }}
</div> {% endif %}
{% if product.metafields.my_fields.order != blank %} <div id="tab3" class="tabcontent">
{{ product.metafields.my_fields.order }}
</div> {% endif %}
{% if product.metafields.my_fields.frames != blank %}<div id="tab4" class="tabcontent">
{{ product.metafields.my_fields.frames }}
</div> {% endif %}
</div>
</div>
Hi @tinadochana ,
Please try replacing your code with the below one.
<div class="tabs-area">
<div class="tab">
{% if product.metafields.my_feild.description != blank %}
<button class="tablinks active" onclick="openTab(event, 'tab1')">How To Order </button>
{% endif %}
{% if product.tags contains 'options' %}
{% if product.metafields.my_fields.options != blank %}
<button class="tablinks" onclick="openTab(event, 'tab2')">Drafts </button>
{% endif %}
{% endif %}
{% if product.metafields.my_fields.order != blank %}
<button class="tablinks" onclick="openTab(event, 'tab3')">Manufacturing </button>
{% endif %}
{% if product.metafields.my_fields.frames != blank %}
<button class="tablinks" onclick="openTab(event, 'tab4')">FAQ </button>
{% endif %}
{% if product.metafields.my_fields.reviews != blank %}
<button class="tablinks" onclick="openTab(event, 'tab5')">reviews </button>
{% endif %}
</div>
<div class="tab__inner-text">
{% if product.metafields.my_feild.description != blank %}
<div id="tab1" class="tabcontent" style="display:block">
{{ product.metafields.my_feild.description }}
</div>
{% endif %}
{% if product.metafields.my_fields.options != blank %}
<div id="tab2" class="tabcontent" style="display:none">
{{ product.metafields.my_fields.options }}
</div>
{% endif %}
{% if product.metafields.my_fields.order != blank %}
<div id="tab3" class="tabcontent" style="display:none">
{{ product.metafields.my_fields.order }}
</div>
{% endif %}
{% if product.metafields.my_fields.frames != blank %}
<div id="tab4" class="tabcontent" style="display:none">
{{ product.metafields.my_fields.frames }}
</div>
{% endif %}
</div>
</div>
Hope it helps...
Thank you for the help! I got someone to help me and the issue was fixed! 🙂
Make the shift from discounts to donations, and witness your business not only thrive fina...
By Holly Dec 4, 2023On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023