Having only one tab of Metafield open when page loads instead of all

[tinadochana]

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>

[gr_trading]

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...

[tinadochana]

Thank you for the help! I got someone to help me and the issue was fixed! 🙂