I Have a custom product grid for one of the brands I am selling that has 4 tabs to hover and the content is changing in every tab. When i try to create another grid, 2 of the tabs are not showing the pictures i’ve inserted. First tab that’s not showing pictures and 2 of the tabs are showing as needed. Security section The code is the same for both sections.
Here is the code for the first part(no image section)
<div class="tab">
<button class="tablinks" onmouseover="openCity(event, 'Switches')" id="defaultOpen">Switches</button>
<button class="tablinks" onmouseover="openCity(event, 'Routers')">Routers</button>
<button class="tablinks" onmouseover="openCity(event, 'Security')">Security</button>
<button class="tablinks" onmouseover="openCity(event, 'Wireless')">Wireless</button>
</div>
<script type="lazyload2">
// Get the element with id="defaultOpen" and click on it
setTimeout(function() { openCity(event, 'Switches'); document.getElementById('defaultOpen').className += " active"});
</script>
<div class="row tabcontent" id="Switches" style="margin-left:-10px;margin-right:-10px;">
<div class="mobile-grid-2 col-md-{{ section.settings.banner_col_1 }} col-sm-{{ section.settings.banner_col_1 }}" style="padding-left:10px;padding-right:0px;padding-bottom:15px;">
{% if section.settings.image_banner_col_1 != blank %}
{% assign img_banner_col_1 = section.settings.image_banner_col_1 | img_url: "master" %}
{% assign img_banner_col_1_alt = section.settings.image_banner_col_1_alt %}
{% else %}
{% assign img_banner_col_1 = 'img566x566.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_1 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #e8e8e8);height: 598px;">
<div class="grid-image">
<img class="img-responsive lazyloaded lazy2 main" data-src="{{ img_banner_col_1 }}" alt="{{ img_banner_col_1_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_1 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_1 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_1 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
<div class="col-md-{{section.settings.banner_col_2}} col-sm-{{section.settings.banner_col_2}}" style="padding-left:10px;padding-right:10px;padding-bottom:15px;">
<div class="row">
<div class="mobile-grid banner_item col-md-12 col-sm-12" style="padding-right:10px; padding-bottom: 10px;">
{% if section.settings.image_banner_col_2_1 != blank %}
{% assign img_banner_col_2_1 = section.settings.image_banner_col_2_1 | img_url: "master" %}
{% assign img_banner_col_2_1_alt = section.settings.image_banner_col_2_1_alt %}
{% else %}
{% assign img_banner_col_2_1 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_2_1 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #e0e5e9);height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_2_1}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_2_1_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_2_1 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_2_1 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_2_1 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="mobile-grid banner_item col-md-6 col-sm-6" style="padding-right:10px;">
{% if section.settings.image_banner_col_2_2 != blank %}
{% assign img_banner_col_2_2 = section.settings.image_banner_col_2_2 | img_url: "master" %}
{% assign img_banner_col_2_2_alt = section.settings.image_banner_col_2_2_alt %}
{% else %}
{% assign img_banner_col_2_2 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_2_2 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #eeecea); height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_2_2}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_2_2_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_2_2 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_2_2 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_2_2 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
<div class="mobile-grid banner_item col-md-6 col-sm-6" style="padding-left:0px;">
{% if section.settings.image_banner_col_3 != blank %}
{% assign img_banner_col_3 = section.settings.image_banner_col_3 | img_url: "master" %}
{% assign img_banner_col_3_alt = section.settings.image_banner_col_3_alt %}
{% else %}
{% assign img_banner_col_3 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_3 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #dbe2e4); height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_3}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_3_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_3 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_3 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_3 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
</div>
</div>
</div>
And the second parts code (working section) is here,
<div class="row tabcontent" id="Security" style="margin-left:-10px;margin-right:-10px;">
<div class="mobile-grid-2 col-md-{{ section.settings.banner_col_7 }} col-sm-{{ section.settings.banner_col_7 }}" style="padding-left:10px;padding-right:0px;padding-bottom:15px;">
{% if section.settings.image_banner_col_7 != blank %}
{% assign img_banner_col_7 = section.settings.image_banner_col_7 | img_url: "master" %}
{% assign img_banner_col_7_alt = section.settings.image_banner_col_7_alt %}
{% else %}
{% assign img_banner_col_7 = 'img566x566.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_7 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #e8e8e8);height: 598px;">
<div class="grid-image">
<img class="img-responsive lazyloaded lazy2 main" data-src="{{ img_banner_col_7 }}" alt="{{ img_banner_col_7_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_7 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_7 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_7 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
<div class="col-md-{{section.settings.banner_col_8}} col-sm-{{section.settings.banner_col_8}}" style="padding-left:10px;padding-right:10px;padding-bottom:15px;">
<div class="row">
<div class="mobile-grid banner_item col-md-12 col-sm-12" style="padding-right:10px; padding-bottom: 10px;">
{% if section.settings.image_banner_col_8 != blank %}
{% assign img_banner_col_8 = section.settings.image_banner_col_8 | img_url: "master" %}
{% assign img_banner_col_8_alt = section.settings.image_banner_col_8_alt %}
{% else %}
{% assign img_banner_col_8 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_8 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #e0e5e9);height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_8}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_8_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_8 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_8 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_8 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="mobile-grid banner_item col-md-6 col-sm-6" style="padding-right:0px;">
{% if section.settings.image_banner_col_9 != blank %}
{% assign img_banner_col_9 = section.settings.image_banner_col_9 | img_url: "master" %}
{% assign img_banner_col_9_alt = section.settings.image_banner_col_9_alt %}
{% else %}
{% assign img_banner_col_9 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_9 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #e0e5e9);height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_9}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_9_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_9 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_9 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_9 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
<div class="mobile-grid banner_item col-md-6 col-sm-6" style="padding-right:10px;">
{% if section.settings.image_banner_col_10 != blank %}
{% assign img_banner_col_10 = section.settings.image_banner_col_10 | img_url: "master" %}
{% assign img_banner_col_10_alt = section.settings.image_banner_col_10_alt %}
{% else %}
{% assign img_banner_col_10 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_10 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #eeecea); height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_10}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_10_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_10 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_10 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_10 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
</div>
</div>
</div>
What is the mistake i am making?