My tabs content isn't active when the page loads

RobMoore007
Excursionist
20 1 2

Hi, I have a set of tabs that are working fine when you click them but when the page loads initially the active tabs content doesn't show until you click on the tab?  here is my code. Please can you give me a steer please

<!--Start tab labels-->
<div class="row">
<div class="twelve columns alpha">
<ul class="tabs">{% if product.metafields.overview.info != blank %}
<li><a class="active" href="#tab1">Overview</a></li>
{% endif %}
{% if product.metafields.features.detail != blank %}
<li><a{% if product.metafields.overview.info == blank %} class="active"{% endif %} href="#tab2">Features</a></li>
{% endif %}
{% if product.metafields.size.guide != blank %}
<li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail == blank %} class="active"{% endif %} href="#tab3">Size Guide</a></li>
{% endif %}
{% if product.metafields.custom.fit != blank %}
<li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit == blank %} class="active"{% endif %} href="#tab4">Custom Fit</a></li>
{% endif %}
{% if product.metafields.techi.info != blank %}
<li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info == blank %} class="active"{% endif %} href="#tab5">Tech Info</a></li>
{% endif %}
{% if product.metafields.terms.text != blank %}
<li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text == blank %} class="active"{% endif %} href="#tab6">T&Cs</a></li>
{% endif %}
{% if product.metafields.specifications.text != blank %}
<li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text == blank %} class="active"{% endif %} href="#tab7">Specifications</a></li>
{% endif %}
{% if product.metafields.lithium.text != blank %}
<li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text == blank %} class="active"{% endif %} href="#tab8">Lithium</a></li>
{% endif %}
{% if product.metafields.charging.advice != blank %}
<li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice == blank %} class="active"{% endif %} href="#tab9">Charging Advice</a></li>
{% endif %}
{% if product.metafields.warranty.text != blank %}
<li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice and product.metafields.warranty.text == blank %} class="active"{% endif %} href="#tab10">Warranty</a></li>
{% endif %}
{% if product.metafields.washing.text != blank %}
<li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice and product.metafields.warranty.text and product.metafields.washing.text == blank %} class="active"{% endif %} href="#tab11">Washing</a></li>
{% endif %}
{% if product.metafields.returns.policy != blank %}
<li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice and product.metafields.warranty.text and product.metafields.washing.text and product.metafields.returns.policy == blank %} class="active"{% endif %} href="#tab12">Returns</a></li>
{% endif %}
{% if product.metafields.goretex.info != blank %}
<li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice and product.metafields.warranty.text and product.metafields.washing.text and product.metafields.returns.policy and product.metafields.goretex.info == blank %} class="active"{% endif %} href="#tab13">Gore Tex Info</a></li>
{% endif %}
{% if product.metafields.interface1.text != blank %}
<li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice and product.metafields.warranty.text and product.metafields.washing.text and product.metafields.returns.policy and product.metafields.goretex.info and product.metafields.interface1.text == blank %} class="active"{% endif %} href="#tab14">Interface-1</a></li>
{% endif %}
{% if product.metafields.video.text != blank %}
<li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice and product.metafields.warranty.text and product.metafields.washing.text and product.metafields.returns.policy and product.metafields.goretex.info and product.metafields.interface1.text and product.metafields.video.text == blank %} class="active"{% endif %} href="#tab15">Video</a></li>
{% endif %}
{% if product.metafields.Personalisation.text != blank %}
<li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice and product.metafields.warranty.text and product.metafields.washing.text and product.metafields.returns.policy and product.metafields.goretex.info and product.metafields.interface1.text and product.metafields.video.text and product.metafields.Personalisation.text == blank %} class="active"{% endif %} href="#tab16">Personalisation</a></li>
{% endif %}</ul>

<!--Start tab content-->
<ul class="tabs-content">{% if product.metafields.overview.info !=blank %}
<li id="tab1">{{product.metafields.overview.info}}<div class="tab-pane fade in active" id="tab1">
{% endif %} 
{% if product.metafields.features.detail !=blank %}
<li id="tab2">{{product.metafields.features.detail}}</li>
{% endif %} 
{% if product.metafields.size.guide !=blank %}
<li id="tab3">{{product.metafields.size.guide}}</li>
{% endif %}
{% if product.metafields.custom.fit !=blank %}
<li id="tab4">{{product.metafields.custom.fit}}</li>
{% endif %}
{% if product.metafields.techi.info !=blank %}
<li id="tab5">{{product.metafields.techi.info}}</li>
{% endif %}
{% if product.metafields.terms.text !=blank %}
<li id="tab6">{{product.metafields.terms.text}}</li>
{% endif %}
{% if product.metafields.specifications.text !=blank %}
<li id="tab7">{{product.metafields.specifications.text}}</li>
{% endif %}
{% if product.metafields.lithium.text !=blank %}
<li id="tab8">{{product.metafields.lithium.text}}</li>
{% endif %}
{% if product.metafields.charging.advice !=blank %}
<li id="tab9">{{product.metafields.charging.advice}}</li>
{% endif %}
{% if product.metafields.warranty.text !=blank %}
<li id="tab10">{{product.metafields.warranty.text}}</li>
{% endif %}
{% if product.metafields.washing.text !=blank %}
<li id="tab11">{{product.metafields.washing.text}}</li>
{% endif %}
{% if product.metafields.returns.policy !=blank %}
<li id="tab12">{{product.metafields.returns.policyt}}</li>
{% endif %}
{% if product.metafields.goretex.info !=blank %}
<li id="tab13">{{product.metafields.goretex.info}}</li>
{% endif %}
{% if product.metafields.interface1.text !=blank %}
<li id="tab14">{{product.metafields.interface1.text}}</li>
{% endif %}
{% if product.metafields.video.text !=blank %}
<li id="tab15">{{product.metafields.video.text}}</li>
{% endif %}
{% if product.metafields.Personalisation.text !=blank %}
<li id="tab16">{{product.metafields.personalisation.text}}</li>
{% endif %}</ul>

 

Regards
Rob Moore - NEWBY!!
0 Likes